为 什么 要 写 这 本 书 





“ 想 要 我 的 财宝 吗 ? 想 要 的 话 可 以 给 你 ! 去 找 吧 ， 我 把 所 有 的 财宝 都 放 在 那里 了 。” 每 次 看 到 罗 杰 的 这 段 话 ， 我 总 是 觉得 海贼王 说 的 就 是 移动 互联 网 的 故事 。 世 界 被 移动 设备 充斥 ， 就 像 海贼王 中 无 处 
不 在 的 大 海 ， 乔 布 斯 的 死 开 启 了 大 航海 时 代 。 





说 到 移动 开发 ， 我 最 早 接触 是 在 刚 上 大 学 时 ， 那 时 跟着 老师 做 一 个 跨 平台 程序 移植 项 目 ， 将 开源 程序 从 Linux 平 台 移植 到 maemo 平 台 ， 现 在 回头 看 是 很 简单 的 。 我 们 从 ubuntu 开始 学 习 ， 到 最 后 将 程序 
运行 到 一 块 板子 上 ， 中 间 经 历 和 学 到 了 许多 的 东西 。 





























完成 这 个 项 目 后 ， 刚 好 赶 上 Android 的 出 现 。 当 时 Android 的 资料 只 有 官方 文档 ， 我 就 抱 着 学 学 看 的 态度 去 研究 ， 却 发 现 并 没有 想象 的 那么 困难 。 “为 之 则 难 者 亦 易 已 ， 不 为 则 易 者 亦 难 已 ”， 这 就 是 我 
最 大 的 感触 。 后 来 我 参加 了 Google 举 办 的 大 学 生 编 程 大 赛 ， 代 表 学 校 取 得 了 些 不 值 一 提 的 名 次 。 



































在 这 段 时 期 ， 我 意识 到 了 文档 的 重要 性 ， 就 开始 在 CSDN 上 写 博客 。 我 想 得 简 单 ， 自 己 费 尽心 血 已 经 解决 的 问题 ， 就 不 要 让 别人 受 同样 的 折磨 。 没 想到 博客 越 写 越 多 ， 如 今 已 经 成 了 CSDN 的 博客 专家 
(blog.csdn.net/fansongy) ， 也 算是 意外 收获 。 

















后 来 发 现 移 动 游戏 的 开发 不 仅 限于 Android 平 台 ，iOS 平 台 也 非常 的 重要 ， 就 学 习 了 Objective-C 编 程 。 但 同一 款 游戏 ， 写 两 套 代码 维护 起 来 很 麻烦 。 最 后 接触 到 了 Cocos2D-X， 它 最 大 的 优势 就 是 
Android 平 台 和 iOs 平 台 共 用 一 套 C+ + 代码 ， 可 以 根据 不 同 的 目标 平台 编译 成 对 应 的 应 用 ， 这 确实 极 大 地 方便 了 开发 者 。 另 一 方面 ，Cocos2D-X 是 开源 引擎 。 当 我 们 遇 到 问题 时 ， 可 以 跟踪 代码 来 了 解 问题 
产生 的 原因 。 同 时 ， 研 究 引 警 本 身 也 是 积累 编程 经 验 的 好 方法 。 
























































由 于 博客 中 都 是 一 些 零散 的 知识 ， 我 试图 将 Cocos2D-X 的 技巧 串 起 来 ， 写 出 更 系统 的 文章 。 正 巧 机 械 工业 出 版 社 华章 公司 的 杨 福 川 老师 找到 我 ， 一 拍 即 合 ， 就 有 了 这 本 书 。 











读者 对 象 
+ Cocos2D- 义 的 初级 及 中 级 开发 者 。 
+ 没 使 用 过 Cocos2D-X， 但 有 iOS 或 Android 开 发 经 验 的 开发 者 。 
: 没有 手 游 开发 经 验 ， 但 之 前 有 C/C++ 或 Java 等 语言 开发 经 验 的 开发 者 。 
“ 游戏 开发 爱好 者 。 
“ 开设 相关 课程 的 大 专 院 校 师 生 。 
如 何 阅 读本 书 


本 书 的 内 容 分 为 三 个 部 分 。 











第 一 部 分 : 快速 上 手 (第 1~3 章 ) 。 主 要 介绍 Cocos2D-X 3.x 中 开发 的 基本 方法 ， 以 及 一 些 新 加 入 的 特性 。 通 过 阅读 ， 能 够 学 会 安装 配置 Cocos2D-X 开 发 环境 ， 并 能 将 开发 出 的 程序 运行 到 手机 上 。 同 
时 掌握 简单 的 游戏 开发 流程 ， 能 够 开发 一 款 简单 的 钢琴 游戏 。 



































二 部 分 : 开发 实战 (第 4~8 章 ) 。 通 过 手把手 的 方式 ， 由 浅 入 深 地 讲解 手机 游戏 的 开发 。 首 先 通 过 飞机 空战 游戏 ， 重 点 讲解 了 帧 动画 、 事 件 分 发 机 制 、Schedule 的 使 用 以 及 对 话 框 的 制作 。 接 着 通过 
打 砖 块 游戏 ， 详 细 介绍 了 物理 引擎 Physicls 的 使 用 。 最 后 通过 塔 防 游 戏 ， 介 绍 了 瓦 片 地 图 以 及 Cocostudio 整 合 场景 的 使 用 方法 。 在 讲解 代码 的 同时 ， 渗 透 了 C+ +11 的 使 用 ， 带 领 读者 熟悉 新 的 编码 风格 。 






















































































第 三 部 分 : 拓展 知识 (第 9~12 章 ) 。 这 部 分 包括 对 Cocos2D-X 3.x 中 常见 知识 的 总 结 ， 以 及 常见 的 业务 型 需求 与 Cocos2D-X 游 戏 开 发 的 结合 ， 例 如 ，Android 平 台 SDK 的 接 入 、App store 支付、 社交 
》 享 的 接 入 等 。 




















前 两 部 分 建议 按 顺序 阅读 ， 当 然 如 果 你 是 一 名 经 验 丰富 的 资深 用 户 ， 能 够 理解 Cocos2D-X 的 相关 基础 知识 和 使 用 技巧 ， 也 可 以 跳 过 一 些 熟悉 的 章节 。 第 三 部 分 较 前 两 部 分 相对 独立 ， 涉 及 了 Android、 
iOS 开 发 的 相关 知识 。 如 果 有 特殊 的 需求 ， 可 以 直接 阅读 相关 章节 。 





















































勘误 和 支持 


由 于 作者 的 水 平 有 限 ， 加 之 编写 时 间 仓 促 ， 书 中 难免 会 出 现 一 些 错误 或 者 不 准确 的 地 方 ， 忧 请 读者 批评 指正 。 为 了 方便 大 家 交流 ， 我 专门 创建 了 QQ 群 (305889963) 。 大 家 有 问题 可 以 在 群 里 探讨 ， 
我 也 会 尽量 为 大 家 解答 。 书 中 的 全 部 源 文件 可 以 在 随 书 光盘 中 找到 ， 书 中 的 代码 会 在 Github 上 (https: //github.com/fansongy/Example-of-Cocos2D-X) 动态 更 新 。 也 欢迎 大 家 关注 我 的 个 人 主页 
(www.songyang.net) ， 我 会 将 相应 的 功能 更 新 及 时 发 布 出 来 。 如 果 你 有 更 多 宝贵 意见 ， 也 欢迎 发 送 邮 件 至 fansongy@gmail.com， 期 待 能 够 得 到 你 们 的 真 执 反馈 。 





致 澳 





首先 要 感谢 Cocos2D-X 的 开发 团队 ， 感 谢 他 们 为 游戏 开发 者 带 来 如 此 优秀 的 引擎 。 











感谢 我 的 老 东 家 联众 互动 网 络 股份 有 限 公司 。 感 谢 公司 对 我 的 锻炼 和 培养 ， 使 我 在 很 短 的 时 间 内 从 初出 校门 的 学 生 ， 成 长 为 独当一面 的 能 手 。 











感谢 我 的 母校 哈尔滨 理工 大 学 。 它 为 我 提供 了 一 个 自由 充实 的 学 习 环境 ， 各 个 校区 的 图 书馆 中 有 看 不 完 的 书籍 和 杂志 。 























感谢 CSDN 网 站 上 每 一 位 阅读 我 文章 的 网 友 ， 他 们 的 支持 ， 是 我 写 下 去 的 动力 。 


感谢 胡 争 辉 老师 。 在 构思 本 书 的 过 程 中 ， 他 为 我 提供 了 大 量 的 建议 。 他 无 私 地 分 享 了 之 前 的 成 功 经 验 ， 并 以 此 作为 指导 ， 一 起 完成 了 本 书 章 节 的 编排 。 








感谢 李 添 耐 (新 浪 微 博 LTTSweetness: http://weibo.com/u/2028373575) 。 作 为 本 书 唯一 的 美术 人 员 ， 工 作 之 余 她 花费 了 大 量 的 时 间 来 制作 书 中 用 到 的 美术 资源 ， 可 以 说 没有 她 ， 我 很 难 顺利 完成 
这 本 书 的 编写 。 











感谢 机 械 工业 出 版 社 华章 公司 的 杨 福 川 老师 和 姜 影 老师， 在 这 一 年 左右 的 时 间 中 始终 支持 我 的 写作 ， 鼓 励 和 引导 我 顺利 完成 全 部 书稿 。 


最 后 感谢 我 的 爸爸 、 妈 妈 、 和 爷爷 、 奶 奶 ， 感 谢 他 们 将 我 培养 成 人 ， 并 教会 我 做 人 的 道理 。 





谨 以 此 书 献 给 我 最 亲爱 的 家 人 ， 以 及 众多 热爱 Cocos2D-X 的 朋友 们 ! 


- 第 1 章 ”搭建 Cocos2D-X 开 发 环境 
“第 2 章 ”钢琴 师 (上 ) 


“第 3 章 ”钢琴 师 (F) 


第 1 章 ”搭建 Cocos2D-X 开 发 环境 


劲松 是 程序 员 ， 万 千 平凡 程序 员 中 的 一 个 。 因 为 名 字 中 有 一 个 松 字 ， 做 事 又 


“劲松 ， 今 天 有 一 个 学 校 开 学 生 作品 展 ， 我 看 见 一 个 美女 老师 ， 真 心 漂亮 | ” 


很 给 力 ， 大 家 就 送 了 他 这 个 北京 地 铁 站 的 名 字 。 


文 彪 刚刚 从 外 面 进 屋 ， 就 兴 冲 冲 地 说 。 


劲松 放下 鼠标 ， 捏 过 头 来 调侃 道 : “就 这 烟雾 蒙蒙 的 天 气 ， 你 确定 你 看 清 了 ? ” 


“我 跟 你 可 不 一 样 ， 策 划 都 拥有 一 个 发 现 美的 眼睛 ， 不 像 程序 员 ， 发 现 的 都 是 Bug。” 文 彪 一 本 正经 地 说 。 


SK 从 旁边 屋 里 走出 来 间 “Dota 么 ?”。SK 也 是 一 名 程序 员 ， 因 为 Dota 打 得 好 ， 名 字 的 拼音 缩写 又 是 SK， 刚 好 和 Dota 中 沙 王 的 缩写 吻合 ， 就 得 到 了 这 个 称号 。 


“去 去 ， 说 正经 事 呢 。 劲 松 ， 你 相信 缘分 吗 ? ” 
“ 算 信 吧 ， 不 过 得 连 到 开发 环境 调试 一 下 才 知 道 ……” 
“ 帮 我 个 忙 ， 你 最 近 不 是 正 研究 着 什么 cos 之 类 的 手机 开发 吗 ? ”。 


“cos? 还 正弦 呢 。Cocos2D-X”。 


“ 呀 ， 反 正 就 是 它 啦 ， 帮 我 做 个 什么 放手 机 上 吧 ， 现 在 手机 上 这 些 乱 七 八 粳 的 应 用 ， 追 妹子 完全 不 给 力 啊 ， 望 大 神 给 我 做 个 神 装 。” 


“Dotak? ” SKA A TAA o 


“Dota 啦 ， 劲 松 ， 这 事 就 这 么 说 定 啦 。 都 赶紧 启动 ， 最 后 进去 的 开局 买 鸡 。” 


“我 相信 缘分 么 ” ”看 着 加 载 中 的 Dota， 劲 松 心 想 。 也 许 试 试 就 知道 了 。 


HA LIT AF, WHAT o 


“单子 接 了 ， 等 我 重新 搭 个 环境 就 上 手 做 。” 劲 松 在 Dota 的 盟友 聊天 中 输入 道 。 


“OK 我 包 鸡 包 眼 ” 


1.1 引擎 简介 











Cocos2D-X 是 一 个 开源 的 2D 移 动 游戏 框架 ， 它 的 原型 是 Cocos2D。 此 框架 的 目的 是 简化 游戏 开发 的 流程 ， 让 开发 者 能 够 专注 于 开发 游戏 本 身 。 它 是 基于 MIT 许 可 证 发 布 的 ， 这 也 就 意味 着 我 们 可 以 免费 








使 用 它 来 开发 商业 产品 。 








1.1.1 选择 Cocos2D-X 的 理由 

















Cocos2d-X 的 核心 点 是 围绕 Cocos2D 跨 平台 。 使 用 Cocos2D-X 创 建 的 项 目 可 以 很 容易 地 运行 在 OS、Android、Windows Phone 等 移动 设备 上 。Cocos2D-X 还 支持 Windows、Mac 和 Linux 等 桌面 操 





作 系 统 ， 因 此 ， 我 们 编写 的 源 代码 可 以 很 容易 在 桌面 操作 系统 中 编辑 和 调试 。 












































在 使 用 Cocos2D-X 开 发 手机 游戏 时 ， 可 以 采用 的 语言 有 C++、Lua、Javascript 三 种 。 多 种 语言 的 支持 为 游戏 框架 设计 提供 了 极 大 的 灵活 性 ， 方 便 开 发 者 针对 不 同 的 游戏 制定 不 同 的 方案 。 








Cocos2D-X 用 户 不 仅 包括 个 人 开发 者 和 游戏 开发 爱好 者 ， 还 包括 许多 知名 大 公司 如 Zynga、Wooga、Gamevil、Glu、GREE、Konami、TinyCo、HandyGames、IGG 及 Disney Mobile 等 。 截 止 2013 




















年 9 月 ,全球 基于 Cocos2D-X3 引 擎 的 游戏 下 载 量 逾 15 亿 ， 其 中 许多 位 于 苹果 应 

















等 ， 它 们 的 工程 师 在 Cocos2D-X 领 域 也 非常 活跃 。 


1.1.2 Cocos2D-X 3.x 版 本 与 先前 版 本 的 不 同 


2014 年 6 月 Cocos2D-X 推 出 了 最 新 的 版 本 一 Cocos2D-X 3.0。 在 Cocos2D-X 3.0 以 及 后 续 版 本 中 做 了 很 多 基础 的 改进 ， 比 如 性 能 、 

















商店 (AppStore) 和 谷歌 应 用 商店 (Google Play) 排行 榜 前 列 。 同 时 许多 公司 如 触 控 、 谷 歌 、 微 软 、ARM、 英 特 尔 及 黑莓 



































能 方面 优化 了 很 多 自动 技术 ， 例 如 当 一 个 游戏 场景 大 出 手机 屏幕 时 ， 引 警 会 把 

















幕 之 外 的 东西 给 吻 除 掉 ， 使 大 场景 游戏 的 流畅 度 有 很 大 的 提升 。 

















兼容 性 (尤其 是 Android 手 机 的 兼容 性 ) 、CPU 和 内 存 消耗 等 。 在 性 


从 开发 的 角度 来 说 ，Cocos2D-X 3.0 更 改 了 大 量 的 接口 ， 使 得 整体 代码 风格 更 一 致 。 虽 然 这 会 使 先前 Cocos2D-X 2.x 的 代码 不 兼容 ， 但 从 长 远 的 角度 来 说 ， 将 代码 转移 到 Cocos2D-X 3.x 版 本 上 是 值得 








的 。Cocos2D-X 3.0 引 入 了 大 量 的 C++11 特 性 ， 使 开发 过 程 变 得 更 轻松 。 


1.2 ”搭建 开发 环境 
在 了 解 了 关于 Cocos2D-X 最 基本 的 信息 后 ， 我 们 来 动手 搭建 Cocos2D-X 开 发 环境 。 


1.2.1 安装 开发 环境 


1) 安装 VS 2012 (Visual Studio 2012) 。 在 微软 官方 网 站 下 载 安 装 包 后 直接 安装 即 可 。 





2) 找到 官网 的 DownLoad 页 面 (http://www.cocos2d-x.org/download) 下 载 最 新 的 Cocos2D-X 并 进行 解压 。 本 书 使 用 的 是 Cocos2D-X 3.0 版 本 。 


3) 解压 后 进入 “build” 文 件 夹 ， 运 行 VS 2012 的 项 目 : cocos2d-win32.vc2012.sIn。 这 样 会 启动 VS 2012。 


4) 在 左 侧 的 解决 方案 管理 器 中 ， 找 到 “TestCpp” 项 目 ， 右 击 ， 在 弹出 菜单 中 选择 “ 设 为 启动 项 目 ”， 如 图 1-1 所 示 。 
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图 1-1 设置 启动 项 目 











5) 按 “F5” 启 动 调试 。 运 行 调试 刚刚 设置 的 启动 项 目 ，VS 2012 在 编译 工程 文件 的 同时 ， 会 编译 需要 的 依赖 库 文 件 。 待 编译 完成 后 ， 如 果 出 现 如 
成 功 。 








图 1-2 所 示 的 程序 运行 界面 ， 说 明 Cocos2D-X 已 经 配置 





|a | Cpp Tests 


ActionManager 


Actions - Basic 
Actions - Ease 
Actions - Progress 
Audio - CocosDenshion 
Box2d - Basic 
Boxz2d - TestBed 


图 1-2 运行 TestCpp 的 效果 








开发 一 个 游戏 怎么 可 能 没有 图 形 化 的 编辑 工具 呢 ? Cocos2D-X 提 供 了 官方 团队 维护 的 CocoStudio 作 为 默认 的 编辑 工具 。 





Cocostudio 包 括 动画 编辑 器 、UI 编 辑 器 、 场 景 编辑 器 、 数 据 编辑 器 四 部 分 。 我 们 可 以 在 官网 (http://www.cocos2d-x.org/download) 下 载 CocoStudio 的 最 新 版 本 。 


下 载 后 直接 运行 即 可 安装 。 





注意 CocoStudio 需 要 .NET Framewotk 的 支持 。 因 为 VS 2012 中 已 经 集成 了 .NET， 所 以 不 需要 担心 。 如 果 未 安装 .NET Framewotk， 会 在 安装 CocoStudio 的 过 程 中 提示 安装 。 


一 路 点 击 下 一 步 ， 安 装 成 功 后 运行 CocoStudio， 显 示 如 图 1-3 所 示 ， 说 明 安 装 成 功 。 





bod o <| 





Welcome to CocoStudio_v1.3.0.1 





Animation Editor UI Editor Scene Editor Data Editor 








1-3 ”CocoStudio 运 行 画面 








13 ”创建 项 目 
配置 好 了 开发 环境 ， 接 下 来 我 们 创建 一 个 新 项 目 。 


1.3.1 安装 Python 














为 什么 要 安装 Python? 因为 从 Cocos2D-X 3.0 开 始 ， 创 建 项 目 要 以 Python 脚本 的 形式 进行 。 安 装 Python 要 简单 很 多 : 对 于 使 用 Mac 开 发 的 用 户 ， 因 为 Mac 本 身 集 成 了 Python， 所 以 不 必 再 安装 ; 对 于 
使 用 Windows 进 行 开发 的 用 户 ， 要 去 官网 http://www.python.org/ 下 载 安装 包 。 在 这 里 笔者 用 的 是 Python 2.7。 









































安装 Python 的 过 程 比较 简单 ， 一 路 点 击 “ 下 一 步 ” 即 可 。 安 装 完成 后 运行 “命令 与 提示 符 ”， 在 其 中 输入 : python， 出 现 如 图 1-4 所 示 的 画面 ， 则 表示 安装 成 功 。 

















BÄ C:\Windows\system32\cmd.exe - python lo | [5] | Xi 


Microsoft Windows [版 本 6.1.7601] 本 
XPT (c) 2009 Microsoft Corporation。 保 留 所 有 权利 。 


C:\Users\Fansy>python 
Python 2.7.6 (default, Nov 10 2013, 19:24:24) [MSC v.1500 64 bit (AMDG4)] 


“help”, “copyright”, “credits” or “license” for more information. 





图 1-4 Python 安装 成 功 


13.2 ”创建 新 项 目 











在 安装 好 Python 后 ， 我 们 就 可 以 创建 新 项 目 了 。 在 创建 项 目 之 前 ， 我 们 要 配置 环境 变量 。 在 “命令 与 提示 符 ” 中 ， 进 入 到 Cocos2D-X 根 目录 下 。 执 行 setup.py， 效 果 如 代码 清单 1-1 所 示 。 








代码 清单 1-1 注册 命令 路 径 





C:\OutFile\cocos2d-x-3.2>setup.py 

Setting up cocos2d-xhttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... 

-> Adding COCOS2D_CONSOLE_ROOT environment variablehttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... OK 

-> Added: COCOS_CONSOLE_ROOT = C:\OutFile\cocos2d-x-3.2\tools/cocos2d-conso 

le/bin 

-> Looking for NDK ROOT envrironment variablehttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): T 

-> Looking for ANDROID SDK ROOT envrironment variablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): 7 

-> Looking for ANT ROOT envrironment variablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): 

Set up successfull: 
COCOS_CONSOLE_ROOT was added into registry 

Please restart the terminal or restart computer to make added system variables 

take effect 





























在 执行 过 程 中 ， 脚 本 程序 会 停 下 来 询问 我 们 路 径 的 配置 ， 按 回 车 跳 过 即 可 。 因 为 这 些 路 径 配 置 都 是 生成 Android 程 序 需要 用 到 的 ， 在 第 2 章 中 我 们 会 详细 介绍 。 


DH 














执行 完成 后 ， 我 们 来 验证 一 下 安装 是 否 成 功 。 重 新 启动 “命令 与 提示 符 ”， 输 入 cocos 命 令 ， 显 示 代码 清单 1-2 所 示 的 代码 ， 则 说 明 环境 配置 正确 。 





代码 清单 1-2 ”验证 安装 





C:\Users\Fansy>cocos 
C:\Users\Fansy>python C:\OutFile\cocos2d-x-3.2\tools\cocos2d-console\bin\/coc 


os.py 
C:\OutFile\cocos2d-x-3.2\tools\cocos2d-console\bin\/cocos.py 0.1 - cocos cons 
ole: A command line tool for cocos2d 

Available commands: 


compile Compiles the current project to binary 

new Creates a new project 

run Compiles & deploy project and then runs it on the target 
deploy Depoly a project to the target 


Example: 
C:\OutFile\cocos2d-x-3.2\tools\cocos2d-console\bin\/cocos.py new --help 
C:\OutFile\cocos2d-x-3.2\tools\cocos2d-console\bin\/cocos.py run --help 














安装 成 功 后 ， 如 代码 清单 1-3 所 示 ， 输 入 创建 项 目 命令 即 可 创建 一 个 Cocos2D-X 项 目 。 








代码 清单 1-3 ”创建 项 目 命令 





C:\Users\Fansy>cocos new -p com.fansy.HelloWorld -1 cpp -d C:\Code HelloWorld 

C:\Users\Fansy>python C:\OutFile\cocos2d-x-3.2\tools\cocos2d-console\bin\/coc 

os.py new -p com.fansy.HelloWorld -1 cpp -d C:\Code HelloWorld 

Runing command: new 

> Copy template into C:\Code\HelloWorld 

> Copying cocos2d-x fileshttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... 
> Rename project name from 'HelloCpp' to 'HelloWorld' 

> Replace the project name from 'HelloCpp' to 'HelloWorld' 

> Replace the project package name from 'org.cocos2dx.hellocpp' to 'com.fansy.He 

lloWorld' 





执行 运行 命令 成 功 后 ， 一 个 新 的 项 目 就 被 创建 到 C:\Code\HelloWorld 目 录 下 。 


1.3.3 ”目录 结构 


回 过 头 来 看 看 1.3.2 新 建 的 项 目 ， 打 开 C: \Code\HelloWorld 目 录 ， 可 以 看 到 如 图 1-5 所 示 的 文件 结构 。 





出 Classes 
roj.android 


roj.los_mac 


roy. linux 


=] CMakeLists. 





图 1-5 文件 结构 





其 中 : 
+ Classes 中 放置 着 代码 的 主体 部 分 。 几 乎 所 有 的 代码 文件 都 要 放置 在 这 个 文件 夹 中 。 


+ 以 proj. 开 头 的 几 个 目录 分 别 是 各 个 平台 下 的 工程 、 特 有 代码 、 生 成 文件 存放 的 地 方 。 有 我 们 熟悉 的 proj.win32， 当 然 还 有 革 果 的 ptoj.ios_mac、 谷 歌 的 proj.android 等 。 








- Resources 目 录 中 包含 了 在 项 目 中 用 到 的 图 片 资源 、 配 置 文件 等 。 在 生成 某 个 平台 的 程序 时 ， 会 结合 Classes 中 的 代码 、Resources 中 的 资源 文件 ， 以 及 proj.xxx 目 录 中 相应 的 代码 来 整体 生成 。 























打开 proj.win32 目 录 ， 在 其 中 找到 HelloWorld.sin， 双 击 打 开 即 可 使 用 VS 2012 打 开 。 按 F5 键 ， 即 可 编译 运行 。 看 到 如 图 1-6 所 示 运 行 效果 ， 说 明 项 目 创建 成 功 。 






































Hello World 


COCOS ene? 


verts: 270 
calls: 4 
10:7/7107003 





图 1-6 程序 运行 效果 





本 章 介绍 了 Cocos2D-X 3.x 的 基本 特点 ， 开 发 环境 安装 及 配置 ， 还 介绍 了 如 何 使 用 脚本 新 建 项 目 ; 最 后 介绍 了 安装 CocoStudio， 为 后 面 的 开发 做 准备 。 掌 握 这 些 基 础 知识 后 ， 就 可 以 进入 到 正式 的 
Cocos2D-X 游 戏 开发 工作 中 了 。 














劲松 重新 搭 好 了 开发 环境 ， 问 文 彪 道 : “环境 搭 好 了 ， 你 要 做 个 什么 呢 ?” 

LARA OH: “你 看 我 的 名 字 ， 一 文 一 武 。 追 妹子 当然 不 能 用 武 啦 ， 虽 然 我 算 不 上 一 个 文艺 青年 ， 不 过 弹 个 小 曲子 还 是 没 问 题 的 。 不 如 你 就 帮 我 做 个 钢琴 的 应 用 吧 。” 
“钢琴 应 用 不 是 有 现成 的 么 ， 干 嘛 还 要 麻烦 我 做 ? ”劲松 疑惑 地 看 着 他 。 

“这 就 不 懂 了 吧 。 现 在 都 讲 完 定制 ， 网 上 是 能 下 载 到 ， 不 过 追 妹子 还 欠 火 候 。 我 找 了 一 图 ， 没 找到 适合 的 。” 

“所 以 你 其 实 是 没 找到 顺手 的 ? ” 

“也 不 全 是 。 好 比 说 你 要 买书 ， 找 了 一 圈 ， 只 发 现 有 两 本 ， 一 本 用 人 民 币 买 ， 一 本 用 美元 买 。 虽 然 折 算 过 来 价钱 一 样 ， 不 过 美元 那 本 就 显得 更 有 价值 。” 

“但 是 我 还 是 会 买通 过 人 民 币 卖 的 那 本 。” 

“你 没 抓 住 重点 啊 ， 核 心 在 感觉 ,恋情 说 爱 不 就 是 谈 感 觉 么 ?””， 文 彪 继续 说 道 : “感觉 怎么 产生 的 ? 与 众 不 同 。 我 们 的 生活 太 乏 味 了 ， 需 要 点 新 鲜 空气 ， 而 我 要 成 为 那 片 空气 ， 就 像 ……” 
“好 好 ”， 劲 松 赶忙 打 断 他 ， 文 彪 一 旦 胡扯 起 来 ， 就 没完 没 了 ，“ 做 吸 ， 那 就 它 了 ! 另外 ， 你 追 的 还 是 上 次 看 到 那个 妹子 吗 ? ” 

“必须 啊 ， 这 两 天 我 都 调查 好 了 。 她 跟 咱 们 同 岁 ， 学 师范 专业 的 ， 毕 业 后 直接 在 北京 找 的 工作 。” 文 须 一 口气 说 了 这 妹子 的 信息 。 

“我 们 给 行动 起 个 名 字 吧 ”， 文 彪 接着 说 道 ，“ 她 是 教 语文 的 ， 就 叫 文 心 雕 龙 怎么 样 ， 插 有 意境 吧 ? ” 

“ 那 跟 你 也 没关系 啊 。 不 如 叫 “ 文 心 彪 扰 ” 如 何 ? ”劲松 笑 着 问 。 

“ 绝 了 。 劲 松 ， 你 太 给 力 啦 ， 就 它 了 。 哈 哈 ”， 文 彪 大 笑 ，“ 文 心 肛 拢 成 功 与 否 ， 就 看 劲松 大 神 做 的 神器 啦 。” 


“好 说 好 说 ”， 劲 松 笑 着 摆 摆 手 “劲松 的 名 字 是 白 叫 的 吗 ? “ 


2.1 解析 Cocos2D-X 

















搭建 一 个 游戏 很 像 拍 电影 ， 要 把 主角 放 到 正确 的 位 置 ， 并 能 控制 他 的 行为 。 游 戏 开发 的 过 程 更 像 是 一 个 调配 所 需 元 素 的 过 程 。 这 节 将 从 第 1 章 新 建 的 项 目 入 手 , 分 析 Cocos2D-X 的 基本 元 素 和 架构 ， 了 





解 一 下 所 需要 的 “道具 ”。 


211 TR 

















在 玩 游戏 时 ， 我 们 能 看 见 的 、 能 操纵 的 都 是 元 素 。 以 先前 的 HelloWorld 为 例 ， 


中 就 有 三 个 元 素 ， 分 别 是 图 片 、 文 字 和 菜单 。 元 素 这 个 概念 有 个 对 应 的 类 : Node。 因 此 我 们 说 ， 图 片 是 一 个 元 素 ， 它 
































一 定 是 继承 自 Node。 

















打开 在 第 1 章 中 创建 的 项 目 : HelloWorld。 打 开 HelloWorldSscene.cpp 文 件 ， 我 们 来 看 一 下 元 素 究竟 是 怎么 创建 出 来 的 。 





(1) 图 片 

































































场景 和 人 物 大 多 是 通过 图 片 来 表现 的 ， 所 以 图 片 是 最 常用 的 元 素 。 通 常会 使 用 精灵 (Sprite) 来 对 图 片 进行 操作 。 我 们 可 以 看 到 在 init 国 数 中 如 何 创建 一 个 精灵 ， 相 应 代码 如 下 : 























auto sprite = Sprite: :create ("HelLloWor1d.png") ; 





提示 “创建 这 个 Sprite 的 图 片 资源 保存 在 程序 根 目 录 的 Resources 目 录 下 ， 这 个 目录 是 Cocos2D-X 读 取 文件 的 默认 目录 。 项 目 中 使 用 到 的 资源 都 应 该 放置 在 这 个 目录 中 。 


















































上 面 的 代码 创建 了 一 个 精灵 ， 它 显示 的 图 片 是 “HelloWorld.png”。auto 是 自动 类 型 推导 ， 可 以 根据 需要 将 变量 声明 为 对 应 类 型 。 它 是 C+ +11 的 新 特性 ， 具 体 可 以 参考 第 9 章 的 介绍 。 另 外 ， 我 们 来 看 























一 下 sprite 的 类 定义 ， 它 有 很 多 的 构造 函数 ， 如 代码 清单 2-1 所 示 。 


代码 清单 2-1 “Sprite 的 构造 函数 





static Sprite* create(); 

static Sprite* create(const std::string& filename) ; 

static Sprite* create(const std::string& filename, const Rect& rect); 

static Sprite* createWithTexture(Texture2D *texture) ; 

static Sprite* createWithTexture(Texture2D *texture, const Rect& rect, bool rotated=false) ; 
static Sprite* createWithSpriteFrame (SpriteFrame *spriteFrame) ; 

static Sprite* createWithSpriteFrameName (const std::string& spriteFrameName) ; 





我 们 可 以 根据 实际 的 需求 进行 选择 。 


(2) 文字 
































此 处 的 文字 包含 数字 和 文本 两 部 分 。 它 也 是 常用 的 元 素 ， 可 以 实现 标记 状态 、 显 示 完 成 度 、 记 录 结 果 等 功能 。 同 图 片 元 素 一 样 ， 它 也 有 很 多 种 创建 方式 。 在 这 个 例子 中 使 用 的 是 下 面 这 个 创建 函数 : 
































auto label = LabelTTF::create("Hello World", "Arial", 24); 





2.1 


这 行 语句 创建 了 一 个 显示 “Hello World” 的 文字 ， 字 体 是 “Arial”， 字 号 是 24。 


(3) 菜单 




























































































菜单 最 初 专门 用 于 处 理 点 击 。 随 着 Cocos2D-X 的 发 展 ， 发 现 这 种 形式 不 太 容易 使 用 。 在 我 们 使 用 的 Cocos2D-X 3.0 中 ， 点 击 部 分 已 经 重新 设计 了 ， 我 们 会 在 后 面 详细 讲解 。 但 是 ， 对 于 菜单 的 使 用 方 
在 这 里 应 该 有 所 了 解 ， 创 建 一 个 菜单 如 代码 清单 2-2 所 示 。 





代码 清单 2-2 创建 一 个 菜单 


auto closeItem = MenuItemImage: :create ( 

"CloseNormal .png", 

"CloseSelected.png", 

CC CALLBACK 1 (HelloWorld: :menuCloseCallback, this)); 
auto menu = Menu::create(closeItem, NULL); 


注意 ”真正 创建 出 菜单 的 是 最 后 一 行 ， 而 之 前 创建 的 closeItem 是 一 个 菜单 项 。 一 个 菜单 是 一 个 容器 ， 可 以 含有 很 多 菜单 项 。 














从 代码 清单 2-2 中 我 们 看 到 ， 前 两 个 参数 是 

















片 资源 ， 它 们 是 正常 状态 和 点 击 状态 所 使 用 的 显示 图 片 ， 第 三 个 参数 是 一 个 回调 函数 ， 当 点 击 按钮 时 调用 这 个 函数 。 
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注意 CC_CALLBACK_1 是 Cocos2D-X3.0 中 新 加 入 的 回调 定义 ， 它 是 基于 C++11 中 的 std::bind 的 一 种 回调 方式 ， 最 后 一 位 数字 代表 这 个 绑 定 函 数 有 一 个 参数 。 


.2 B 



























































看 过 了 对 元 素 的 介绍 ， 我 们 再 来 了 解 一 下 ， 在 Cocos2D-X 的 程序 中 如 何 使 用 层 来 处 理 元 素 间 的 关系 。 正 如 Photoshop 一 样 ， 将 不 同 元 素 放置 到 不 同 的 层 上 ， 不 同 层 上 的 元 素 之 间 就 不 会 受到 影响 。 采 











这 样 的 方式 ， 可 以 实现 对 元 素 的 灵活 管理 。 


注意 在 同一 层 中 ， 也 可 以 分 出 更 小 的 “ 层 ”， 通 常 使 用 “ZOrder” 来 标记 。“ZOrderf” 只 是 逻辑 意义 上 的 层 ， 并 不 像 这 里 的 层 是 一 个 数据 结构 。 有 些 时 候 ， 需 要 通过 更 改 “ZOrder” 来 手动 调整 元 素 


间 的 遮挡 关系 。 























在 HelloWorld 中 ， 将 所 有 的 元 素 都 加 入 到 了 一 个 层 中 。 这 个 层 的 创建 位 置 在 HelloWorldScene.cpp 中 的 createScene 函 数 中 ， 创 建 方法 如 下 : 





auto layer = HelloWorld::create(); 





2.1 


3 场景 





























我 们 可 以 认为 场景 是 在 一 定 的 时 间 、 空 间 内 发 生 的 一 系列 事件 的 集合 ， 因 此 场景 是 一 个 比 层 更 大 的 概念 ， 是 一 个 层 的 集合 。 创 建 场景 的 方式 依旧 可 以 在 createScene 函 数 中 看 到 ， 代 码 如 下 : 





auto scene = Scene: :create(); 





2.14 导演 


既然 是 拍 “ 微 电影 ”， 总 要 有 导演 。 我 们 的 程序 中 也 有 这 么 一 个 “导演 ”， 当 “他 ” 喊 “Cut” 时 ， 场 景 就 要 停止 。 它 是 一 个 单 例 ， 在 AppDelegate.cpp 文 件 的 applicationDid-FinishLaunching 函 数 
中 初始 化 ， 并 且 可 以 载 入 一 个 默认 的 场景 ， 如 代码 清单 2-3 所 示 。 


代码 清单 2-3 ”初始 化 导演 并 载 入 场景 





// 初 始 化 

auto director = Director::getInstance () 7 
// 创 建 场景 

auto scene = HelloWorld: :createScene () ; 
// 载 入 场景 


director->runWithScene (scene) ; 





提示 “ 单 例 模式 是 一 种 常用 的 软件 设计 模式 。 通 过 单 例 模式 可 以 保证 系统 中 的 某 个 类 只 有 一 个 实例 。 单 例 在 对 实例 个 数 进行 控制 的 同时 ， 也 节约 了 系统 资源 。 在 Cocos2D-X 中 大 量 使 用 了 单 例 。 简 单 点 
说 ， 单 例 就 是 一 个 全 局 的 实例 。 


2.1.5 组 合 


经 过 上 面 的 介绍 ， 我 们 已 经 知道 了 元 素 、 层 、 场 景 等 ， 那 么 如 何 把 它们 组 织 起 来 呢 ? 


仔细 看 HelloWorldscene.cpp 中 的 init 函 数 ， 我 们 会 发 现 有 一 个 addChild 函 数 ， 它 就 是 把 所 有 东西 组 合 起 来 的 关键 。 当 我 们 使 用 addChild 函 数 时 ， 就 可 以 为 当前 对 象 添加 一 个 子 对 象 ， 这 样 我 们 就 可 以 
建立 一 个 树 型 结构 ， 进 而 构建 出 整个 游戏 。 在 绘制 每 个 元 素 时 ， 也 会 绘制 它 的 子 节点 。 反 过 来 说 ， 如 果 未 画 出 某 个 元 素 ， 很 有 可 能 是 我 们 忘记 使 用 addChild 函 数 了 。 





2.2 ”使 用 UI 编辑 器 





像 上 一 节 说 过 的 那样 ， 我 们 可 以 使 用 addChild 函 数 在 代码 中 组 合 层 和 元 素 。 有 了 这 些 知识 ， 我 们 就 可 以 着 手 构思 一 下 我 们 要 做 的 钢琴 游戏 了 。 


钢琴 的 琴键 很 多 ， 手 机 屏幕 肯定 放 不 下 ， 必 须 有 一 个 能 够 拖 动 的 琴键 组 。 另 外 琴键 的 位 置 怎么 确定 ?总 不 能 硬 想 吧 ? 这 就 要 用 到 图 形 化 的 编辑 工具 。 在 这 节 中 我 们 将 使 用 编辑 器 编辑 一 个 可 拖 动 的 琴 
键 。 





2.2.1 创建 UI 工程 





UI Editor 是 CocoStudio 的 一 部 分 ， 它 的 主要 功能 是 编辑 游戏 中 的 UI。 接 下 来 我 们 就 了 解 一 下 它 的 使 用 。 


























首先 ， 我 们 运行 CocoStudio， 在 主 界面 中 点 选 UI Editor。 在 弹出 的 UI 编辑 器 菜单 中 点 选 “ 文 件 ” 一 “新 建 项 目 ”， (或 使 用 快捷 键 “Ctrl+ N”) ， 会 弹出 如 图 2-1 的 新 建 项 目 对 话 框 ， 在 其 中 更 改 项 目 
名 和 路 径 后 ， 点 击 确定 。 


Piano 


C\Code\CocoStudio\} 











图 2-1 创建 新 UI 工程 








创建 成 功 后 会 弹出 如 图 2-2 的 工程 界面 ， 这 就 是 我 们 的 工作 区 。 








区 | 


文件 (P) Hi 日 视图 (Vv) 窗口 (W FER} (H) Ba) 
画布 440*320 国 Ono 于 


-5x | 资源 


aE 


BE Resources 


对 象征 构 


Panel_20 











图 2-2 UI 编辑 器 的 工作 区 








接 下 来 我 们 做 些 基本 的 更 改 ， 使 工程 配置 符合 我 们 的 要 求 。 
: 更 改 画布 列表 中 的 名 字 ， 选 中 画布 列表 中 的 画布 名 ， 按 下 “F2”， 将 其 更 改 为 Piano， 这 将 是 我 们 项 目 导 出 后 的 文件 名 。 


“ 在 工具 栏 中 点 选 画 布 ， 更 改 画 布 大 小 ， 这 里 我 们 选择 960*640， 如 图 2-3 所 示 。 


普通 模式 ”画布 900*640 B 


画布 列表 480 * 320 


320 * 480 
Plano | 960* 640 


640 * 960 
1024 * 768 
768 * 1024 
Fixe (*) 





图 2-3 BBA KA 
技巧 ”在 编辑 器 的 右 下 角 有 缩放 的 滚动 条 ， 可 以 用 来 调整 工作 区 的 大 小 。 另 外 ， 按 住 空格 键 可 以 拖 动 工作 区 。 


在 配置 好 基本 环境 后 ， 我 们 着 手 创 建 一 个 滚动 层 。 














在 左 侧 的 工具 栏 中 找到 滚动 层 ， 点 选 拖 动 到 工作 区 中 ， 如 图 2-4 所 示 。 











图 2-4 创建 滚动 层 








完成 上 述 操作 后 ， 我 们 可 以 看 见 一 个 新 建 的 红色 的 














区 域 ， 即 滚动 区 域 。 接 下 来 ， 我 们 更 改 它 的 属性 值 ， 使 其 符合 我 们 的 要 求 。 








: 在 “属性 ”一 “尺寸 和 模式 ”中 ， 将 控件 宽 改 为 960， 将 控件 高 改 为 640， 移 动 控件 使 它 贴 合 在 工作 区 上 。 


“属性 ”一 “控件 布局 ”中 将 坐标 更 改 为 X=0， 


TE 


“属性 ”一 “常规 ”中 ， 更 改名 字 为 “Main”。 


Y=0。 


“属性 ”一 “特性 ”中 ， 更 改 滚动 区 域 宽度 为 1800， 更 改 滑动 方向 为 “Horizontal”。 


注意 ”滚动 区 域 在 滚动 方向 上 没有 增加 ， 是 无 法 产生 滚动 效果 的 。 


接 下 来 我 们 要 将 资源 添加 进 工程 中 。 在 右 侧 “资源 ”选项 卡 中 点 击 “ 添 加 文件 ”图 标 可 以 添加 单个 资源 文件 ， 点 击 “ 添 加 文件 夹 ”可 以 添加 一 个 文件 夹 。 找 到 琴键 的 图 








添加 好 资源 后 ， 我 们 来 创建 一 个 琴键 。 











1) 在 左 侧 工具 栏 中 拖 动 “按钮 ”到 工作 区 中 ， 如 图 











2-5 所 示 。 











CocoStudio 项 目 文件 默认 的 资源 目录 是 项 目 根 目录 下 的 “Resource”。 这 里 我 们 需要 把 随 书 光 盘 文件 中 的 “chapter2/picture” 中 的 图 片 复制 到 “Resource” 目 录 下 。 

















片 资源 ， 将 其 添加 进 资源 中 。 


图 2-5 创建 按钮 


注意 ”此 处 实际 上 是 将 按钮 添加 到 了 滚动 层 Main 中 ， 将 它 添加 成 了 滚动 层 的 子 元 素 。 


2) 在 对 象 结构 列表 中 选择 刚刚 创建 好 的 按钮 。 


3) 确保 “ 


属性 ”一 “常规 ”中 的 交互 复 选 框 被 选中 。 


注意 选中 交互 表示 接收 点 击 消息 。 因 此 如 果 不 选 中 此 项 ， 点 击 时 将 不 会 有 响应 。 


4) 找到 “ 























属性 ”一 “特性 ”。 将 “Resource” 中 “left.png” 拖 动 到 “正常 状态 ”后 面 的 输入 框 中 ,将 “left_down.png” 分 别 拖 动 到 “ 按 下 状态 ”和 “ 禁 





技巧 可 以 在 Windows 的 资源 管理 器 中 选中 图 片 文件 ， 将 其 拖 动 到 右 侧 资源 选项 卡 中 。 




















5) 拖 动 按钮 将 其 调整 到 合适 的 位 置 ， 调 整 好 后 如 图 2-6 所 示 。 














状态 ” 中， 这样 就 完成 了 显示 皮肤 的 更 











图 








Bun 


常规 
垂直 翻转 


水 平 翻 转 
vi] 
显示 /隐藏 


名 字 Button_24 


| White 


横向 布局 C) + 
wie Æ 10: 
a 0 


left.png 
left_down.png 
left_down.png 


Date be TA RT 
图 2-6 ”调整 后 的 按钮 


2-6 中 ， 正 方形 边框 的 四 个 角 点 是 缩放 点 ， 右 侧 边 的 中 点 是 旋转 点 ， 红 色 的 十 字 星 是 锚 点 ， 也 是 旋转 轴 。 





编辑 好 琴键 后 我 们 要 将 其 保存 并 导出 。 


=L 二 


BH Resources 


©) black.png 


Él black_down.png 


left down.png 
middle.png 
middle down.png 
right.png 

right_ down.png 
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点 击 “ 文 件 ” 一 “导出 项 目 ”， 在 弹出 的 对 话 框 中 ， 我 们 可 以 看 到 导出 路 径 和 一 些 导出 的 选项 ， 这 里 我 们 不 做 更 改 。 点 击 确定 ， 会 弹出 一 个 导出 成 功 的 对 话 框 ， 这 样 我 们 的 编辑 工作 就 正式 完成 了 。 


在 上 节 我 们 编辑 出 了 一 个 琴键 ， 但 只 有 界面 是 不 行 的 ， 要 将 它 关联 加 载 到 程序 才 算 完整 。 在 这 节 我 们 将 看 到 如 何 将 CocoStudio 导 出 的 文件 载 入 到 程序 中 ， 运 行 效果 如 








图 2-7 所 示 。 








图 2-7 加 载运 行 效果 














按照 第 1 章 介绍 的 方法 ， 我 们 创建 一 个 名 为 Piano 的 工程 。 创 建成 功 后 ， 我 们 先 编译 运行 一 下 ， 防 止 原始 工程 创建 出 现 问题 。 





运行 成 功 后 ， 我 们 将 CocoStudio 导 出 的 资源 复制 到 Piano 工 程 的 Resources 目 录 下 。 











属性 。 在 Cocos2D-X3.0 中 将 功能 进行 分 类 并 封装 到 不 同 的 库 中 ， 因 此 要 使 用 相应 功能 就 要 配置 相应 的 包含 目录 和 库 依赖 。 





接 下 来 要 配置 项 目 


我 们 要 使 用 CocoStudio 导 出 文件 ， 因 此 要 按 以 下 方法 配置 。 
属性 ”， 在 弹出 的 对 话 框 中 选择 “C/C++” 一 “常规 一 “附加 包含 目录 ”， 在 “附加 包含 目录 ” 行 示 点击 下 箭头 ， 在 下 拉 菜 单 中 选择 编辑 。 在 其 中 添加 两 














1) 添加 附加 包含 目录 。 右 击 “ 项 目 ” 一“ 
个 目录 : $ (EngineRoot) cocos\ 和 $ (EngineRoot) cocos\editor-support， 如 图 2-8 所 示 。 














eso maea or nwo | 


$(EngineRoct)cocos\audio\include:$(EngineRoot)extemal:$(Engin 
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$(EngineRoot)cocos\2d 
$(EngineRoot)cocos\gui 
$(EngineRoot)cocos\base 
$(EngineRoot)cocos\physics 
$(EngineRoot)cacos\math\kazmath\include 
解决 方案 资源 管理 器“ BRR | 
mh b T ARRE RA REED 
显示 给 出 来 源 (S); 调试 
el. supports_discard frame 
gl. supports_vertex_array] 
Sdict> 
“Piano. exe” (Wind2): BEDE} 
3542 Ox1bf 已 退出 ， EEA 
线程 0x1ca4 已 退出 ， 返 回 值 为 


3342 Oz19ce 已 退出 ， 返 回 值 为 
程序 “ [6464] Piano. xe” 已 县 


























图 2-8 添加 包含 目录 


2) 添加 附加 库 目录 。 在 “解决 方案 ”上 右 击 ， 选 择 “ 添 加 ”一 “ 现 有 项 目 ”， 如 图 2-9 所 示 ， 然 后 选择 “项 目 根 目录 \cocos2dNcocosNeditor-support\cocostudio\proj.win32” 中 
的 “libCocostudio” 项 目 文件 。 





F 


&) libe Ctrl+Alt+F7 
libc 


Alt+F11 


管理 解决 方案 的 NuGet 程序 包 (N)… 
启用 NuGet 程序 包 还 原 (G) 

新 建 解决 方案 资源 管理 器 视图 (N) 
在 代码 图 上 显示 (C) 


计算 代码 度 旺 值 (C) 


项 目 依赖 项 (S)… 

项 目 生成 顺序 (1)... 

添加 (D) 新 建 项 目 (N).… 
设置 启动 项 目 (A)..… 现 有 项 目 (E)... 


将 解决 方案 添加 到 源 代码 管理 (A)... 新 建 网 站 (W)... 
粘贴 (F = 现 有 网 站 (B)... 


重 命 名 (M) FEW)... Ctrl+Shift+A 


在 文件 资源 管理 器 中 打开 文件 夫 (X) 现 有 项 (G)… Shift+Alt+A 
属性 (R) 新 建 解决 方案 文件 夹 (D) 





图 2-9 添加 库 目录 




















3) 添加 库 引 用 。 右 击 项 目 “Piano”， 之 后 点 击 “ 引 用 ”， 在 弹出 的 对 话 框 下 方 ， 点 击 “ 添 加 新 引用 .…” ， 最 后 在 子 对 话 框 中 义 选 “libCocostudio”， 如 图 2-10 所 示 。 


























搜索 解决 方案 [Ctrl+ 日 





目标 Framework: .NETF 

引用 (R): 名 称 Be 名 称 : 
libAudio C:\Code\Piano\cocos2d\cocos\audio\pre 
名 称 J) libchipmunk C:\Code\Piano\cocos2d\external\chipmu 
libAudio libcocos2d C:\Code\Piano\cocos2d\cocos\2d\cocos 
-libchipmunk libCocosStudio C:\Code\Piano\cocos2d\cocos\editor-su 


libCocosStudio 








-Slibcocos2d 


























图 2-10 ”添加 附加 依赖 项 


4) 用 同样 的 方法 添加 “cocos2d\cocos\ui\proj.win32” 目 录 中 的 项 目 “libGUI”。 





5) 用 同样 方法 添加 “cocos2d\extensions\proj.win32” 目 录 下 的 项 目 “libExtensions”。 





完成 这 些 操作 后 ， 我 们 就 完成 项 目 环境 的 配置 。 


2.3.2 ”加 载 导出 文件 


打开 HelloWorldscene.cpp， 在 最 上 面 添加 如 代码 清单 2-4 所 示 代码 ， 以 包含 文件 和 命名 空间 。 


代码 清单 2-4 添加 包含 文件 和 命名 空间 





#include "HelloWorldScene.h" 
#include "cocostudio/CocoStudio.h" 
#include "ui/CocosGUI.h" 

using namespace cocos2d; 

using namespace cocostudio; 

using namespace ui; 





然后 找到 init () 函数 ， 对 其 进行 更 改 ， 如 代码 清单 2-5 所 示 ， 实 现 导 出 文件 的 加 载 。 


代码 清单 2-5 “加载 导出 文件 





bool HelloWorld: :init() 
{ 


W7111111111111111111111111111/ 
// 1. super init first 
if ( !Layer::init() ) 


return false; 
} 
auto widget = cocostudio::GUIReader: :getInstance ()->widgetFromJsonFile ("Piano.json"); 
addChild (widget) ; 
return true; 





在 代码 清单 2-5 中 ， 我 们 通过 Cocostudio 编 辑 导出 的 文件 ， 再 通过 widgetFrom-JsonFile 将 这 个 文件 导入 到 项 目 中 。 这 里 实际 上 创建 了 一 个 元 素 ， 我 们 取 到 它 的 指针 ， 将 其 赋值 给 “widget” 变 量 。 还 
记得 在 2.1 节 中 介绍 如 何 将 元 素 组 合 起 来 吗 ” 使 用 的 是 addChild 函 数 。 所 以 此 处 我 们 调用 addChild 函 数 将 创建 好 的 元 素 插入 到 场景 中 。 




















编译 运行 代码 清单 2-5， 即 可 出 现 我 们 编辑 的 程序 了 。 





大 家 细 看 ， 会 发 现 右 下 角 显示 着 程序 当前 运行 的 信息 ， 从 中 找到 AppDelegate.cpp 文 件 中 的 applicationDidFinishLaunching 函 数 ， 在 其 中 去 掉 如 代码 清单 2-6 所 示 的 代码 。 


代码 清单 2-6 ”设置 适 配 模式 ， 并 关闭 FPS 





// turn on display FPS 

//director->setDisplayStats (true) ; 

// set FPS. the default value is 1.0/60 if you don't call this 
//director->setAnimationInterval(1.0 / 60); 





我 们 注释 掉 这 两 个 函数 ， 就 可 以 把 FPS 显 示 关 掉 。 这 两 个 函数 是 用 来 检测 游戏 运行 流畅 度 的 ， 通 常 在 开发 的 过 程 中 保留 ， 在 发 布 游戏 时 隐藏 。 


24 完善 功能 

















通过 前 面 的 学 习 我 们 已 经 能 够 将 利用 编辑 器 制作 的 界面 导入 到 程序 中 ， 在 这 一 节 我 们 将 处 理 点 击 响应 ， 并 制作 一 个 完整 的 钢琴 游戏 ， 完 成 效果 如 图 2-11 所 示 。 


























图 2-11 钢琴 游戏 运行 效果 





2.4.1 点 击 响应 


我 们 使 用 编辑 器 编辑 出 的 元 素 ， 都 是 以 控件 (Widget) 的 形式 读 入 到 程序 中 。Widget 是 新 加 入 的 类 型 ， 用 来 封装 UI 控件 的 一 些 基本 功能 ， 其 中 就 封装 了 点 击 响应 。 我 们 编辑 出 的 所 有 元 素 都 应 该 是 











Widget 或 它 的 子 类 型 。 


注意 Widget 类 被 封装 在 ui 库 中 。 使 用 它 需 要 包含 头 文件 CocosGUI.h， 同 时 需要 使 用 命名 空间 ui: using namespace cocos2d::ui; o 











注册 的 TouchEventListener。 简 单 说 来 ， 就 











控件 中 的 点 击 响应 是 以 TouchEventListener 的 形式 实现 的 。 每 一 个 Widget 都 可 以 注册 一 个 TouchEventListener， 当 有 与 点 击 相关 的 事件 发 生 时 ， 就 会 调 
是 在 点 击 的 时 候 调 用 某 个 函数 ， 然 后 在 这 个 函数 中 实现 自己 想 要 的 处 理 。 



























































我 们 可 以 使 用 Widget 中 的 addTouchEventListener 函 数 来 添加 点 击 响应 。 在 使 








此 函数 时 我 们 注意 到 它 的 第 二 个 参数 是 SEL TouchEvent 类 型 ， 按 F12 跳 转 到 它 的 定义 ， 可 以 看 到 如 下 代码 : 








typedef void (Ref: :*SEL TouchEvent) (Ref*, TouchEventType) ; 
#define toucheventselector(_SELECTOR) (SEL_TouchEvent) (& SELECTOR) 



































值 在 typedef 中 已 做 出 说 明 ， 因 此 我 们 需要 声明 一 个 类 型 相同 的 函数 类 型 。 使 用 toucheventselector 宏 ， 可 以 将 我 们 的 函数 转化 为 





SEL TouchEvent 被 定义 成 一 个 函数 类 型 ， 函 数 的 参数 和 返回 
SEL TouchEvent 类 型 。 





知道 了 原理 ， 接 下 来 我 们 动手 创建 自己 的 响应 。 





首先 在 HelloWorldscene.h 的 HelloWorld 类 中 添加 一 个 函数 ， 代 码 如 下 : 


void touchButton (cocos2d: :Ref* object, cocos2d: :ui::TouchEventType type); 


然后 在 HelloWorldscene.cpp 中 实现 它 ， 代 码 如 下 : 


#include "SimpleAudioEngine.h" 
void HelloWorld: :touchButton (Ref* object,ui::TouchEventType type) 


CCLOG ("Touch Button") ; 
CocosDenshion: :SimpleAudioEngine: :getInstance () ->playEffect ("sound/Do.wav") ; 


} 











playEffect 函 数 就 可 以 。 








在 这 段 实现 代码 中 ， 我 们 播放 一 个 声效 。CocosDenshion 是 Cocos2D-X 的 声音 播放 模块 ， 它 是 一 个 单 件 类 ， 要 播放 声效 只 要 通过 getlnstance 函 数 取 到 它 的 实例 ， 然 后 再 调 有 
现在 我 们 还 没有 声音 。 在 随 书 光盘 的 本 章 资源 文件 的 Resources 中 ， 找 到 声音 文件 夹 sound 将 其 复制 到 项 目的 Resources 目 录 下 。 




















技巧 ”CCLOG 的 作用 是 在 终端 中 输出 一 行 日 志 。 灵 活 运用 日 志 可 以 极 大 提高 调试 的 效率 。 


最 后 我 们 要 在 HelloWorld::init 函 数 中 为 按钮 增加 TouchEventListener， 代 码 如 下 : 





auto buttonWidget =dynamic_cast<ui: :Button*>(widget->getChildByName ("Main") 


->getChildByTag (11) ); 


buttonWidget->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 









个 参数 类 型 更 改 为 Widget::TouchEventType。 


数字 标记 (Tag) 来 标识 控件 ， 如 图 





2-12 所 示 。 这 里 我 们 使 用 getChildByName 取 到 我 们 的 拖 动 





图 











1.00 








212 更 改名 字 与 Tag 

















目前 为 止 ， 我 们 已 经 成 功 编辑 了 一 个 按键 ， 并 且 实 现 了 点 击 按键 发 出 声音 。 接 下 来 我 们 把 缺少 的 按键 补 齐 ， 做 一 个 套 完整 的 琴键 。 
键 5 个 ， 每 一 个 按键 需要 有 一 个 对 应 的 声音 文件 。 将 声音 文件 与 对 应 按键 建立 关系 是 目前 面临 的 问题 。 





首先 分 析 一 下 要 实现 哪些 : HD, A 


























这 里 我 们 采 





分 析 清 楚 了 思路 ， 接 下 来 我 们 打开 UI 编辑 器 中 的 项 目 ， 在 其 中 添加 多 个 琴键 。 


1) 调整 好 所 有 琴键 的 位 置 。 





2) 确保 “ 属 


注意 在 完成 编辑 后 记得 在 对 象 结构 桂 


区 域 ， 然 后 再 通过 getChildByTag 取 到 按钮 。 


示 在 Cocos2D-X 3.2 版 本 中 ， 也 可 以 通过 调用 buttonWidget->addTouchEventListener (CC_CALLBACK_2 (HelloWorld::touchButton, this) ) ; 来 绑 定 点 击 。 使 用 这 种 方式 需要 将 touchButton 函 数 的 第 二 


11 


0.00 
Yo 100 


白 键 分 别 是 1~7， 黑 键 是 11~15。 然 后 下 一 个 八 度 再 从 21~27， 





这 样 一 个 策略 : 通过 Tag 来 找到 对 应 的 琴键 ， 通 过 琴键 的 名 字 来 找到 声音 文件 。 每 一 个 八 度 在 Tag 中 的 编号 占 20 个 。 例 如 : 
以 此 类 推 。 而 它们 的 名 字 就 叫 : Do，Ri，Mi 等 。 我 们 取 到 按键 后 ， 再 去 找 它 的 名 字 ， 根 据 名 字 来 对 应 如 “Do.wav “之 类 的 声音 文件 。 




















性 ”一 “常规 ”中 多 选 “ 交 互 ”， 然 后 编辑 每 个 琴键 的 名 字 和 Tag。 其 中 ， 黑 键 用 # 来 表示 ， 如 Do#， 高 八 度 














中 将 黑 键 调整 到 白 键 的 下 面 ， 这 样 才能 在 点 击 黑 键 时 优先 捕获 点 击 消息 。 








这 里 编辑 了 三 组 按键 ， 完 成 后 大 概 如 图 2-13 所 示 。 


H 来 表示 ， 如 DoH。 




















图 2-13 ” 夷 键 编辑 完成 示意 图 











编辑 完成 后 ， 将 其 导出 并 复制 到 工程 中 。 
编辑 好 了 和 琴键， 我 们 再 来 关联 响应 。 像 2.4.1 节 中 介绍 的 ， 将 TouchEventListener 注 册 到 按钮 上 ， 更 改 init 函 数 如 代码 清单 2-7 所 示 。 


代码 清单 2-7 ”为 添加 Listener 





bool HelloWorld: :init() 


{ 
ABA MANA AA 
// 1. super init first 
if ( !Layer::init() ) 


return false; 


auto widget = cocostudio: :GUIReader: :getInstance ()->widgetFromJsonFile ("Piano. 
json"); 
addchi id (widget) z 
//aato buttonWidget =dynamic_cast<ui: :Button*>(widget->getChildByName 
("Main") ->getChildByTag(11)); = 
//pattonWidget->addTouchEventListener (this, toucheventselector (HelloWor 
ld: :touchButton) ) ; 
auto main = widget->getChildByName ("Main"); 
for(int i 10; i<70;+4+1) 
{ 
auto buttonWidget = dynamic_cast<ui: :Button*>(main->getChildByTag (i) ); 
if (buttonWidget) = 
{ 


buttonWidget->addTouchEventListener 
(this, toucheventselector (HelloWorld: :touchButton) ) 7 
} 
} 


return true; 

















我 们 参考 先前 挂 载 点 击 的 方式 ， 先 调用 getChildByName 函 数 取 到 组 件 的 根 节 点 ， 然 后 对 Tag 从 10 到 70 进 行 遍历 ， 如 果 有 对 应 的 按钮 对 象 ， 就 绑 定点 击 响应 。 








最 后 更 改 Listener 函 数 ， 如 代码 清单 2-8 所 示 。 


代码 清单 2-8 ”修改 响应 函数 





void HelloWorld: :touchButton (Ref* object,ui::TouchEventType type) 
{ 
//CCLOG ("Touch Button"); 
//CocosDenshion: : SimpleAudioEngine: :getInstance () ->playEffect ("sound/Do.wav") ; 
auto button =dynamic_cast<Button*> (object) 7 
if (button && type == TouchEventType: : TOUCH_EVENT_BEGAN) 
{ 
char buf[32]={0}; 
std::string name = button->getName () ; 
sprintf (buf, "sound/%s.wav",name. c_str()); 
CCLOG ("Sound Name is:%s",buf) ; 
CocosDenshion: :SimpleAudioEngine: :getInstance () ->playEffect (buf) ; 








在 响应 函数 中 ， 被 点 击 的 对 象 作为 Ref 传 入 到 函数 中 。 对 传 入 的 对 象 进行 类 型 转换 ， 就 可 以 取出 名 字 ， 然 后 我 们 拼 出 一 个 声音 文件 的 路 径 名 。 当 目标 对 象 被 按 下 、 点 击 移动 、 点 击 结束 、 点 击 取消 时 都 会 














这 个 函数 。 这 里 我 们 需要 在 点 击 开始 时 进行 逻辑 处 理 。 





编译 运行 ， 点 击 琴键 就 可 以 演奏 了 。 


2.5 ”安装 到 手机 中 


我 们 编写 的 是 移动 程序 ， 所 以 一 切 都 得 以 安装 到 手机 中 为 准 。 在 这 一 节 中 我 们 来 看 看 如 何 把 钢琴 游戏 安装 到 手机 中 。 


2.5.1 安装 java 环境 





由 于 Andoroid 是 由 Java 语 言 开 发 出 来 的 ， 因 此 我 们 首先 要 安装 Java 的 运行 基础 : JDK。 找 到 JDK 的 下 载 地 址 : http://www.oracle.com/technetwork/java/javase/downloads/index.html， 打 开 后 的 

















下 载 界 面 如 图 2-14 所 示 。 





Linux x86 
Linux x86 
Linux x64 
Linux x64 


133.58 MB 
152.5 MB 

133.67 MB 
151.64 MB 


jdk-8u5-linux586.tar.gz 
jdk-8u5-linux-x64.1.pm 





jdk-3u5-linux-x64.tar.qz 
jdk-8u5-macosx-x64.dmg 
jdk-8u5-solaris-sparcv9.tar.7 
jdk-8u5-solaris-sparcv9.tar.gz 
jdk-8u5-solaris-x64.tar.Z 
jdk-8u5-solaris-x64.tar.gz 
jdk-8u5-windows-i586.exe 
jdk-3u5-windows-x64.exe 


207.79 MB 
135.68 MB 
95.54 MB 
135.9 MB 
93.19 MB 
151.71 MB 
155.18 MB 


Mac OS X x64 

Solaris SPARC 64-bit (SVR4 package) 
Solaris SPARC 64-bit 

Solaris x64 (SVR4 package) 

Solaris x64 

Windows x86 

Windows x64 











2-14 JDK FRED 




















笔者 使 用 的 是 Windows 7 的 64 位 系统 ， 因 此 选择 最 后 一 项 下 载 。 下 载 后 运行 安装 ， 将 路 径 保存 到 C: MavaNWDKNA 目 录 下 。 在 安装 过 程 中 会 提示 安装 jre， 将 其 安装 到 C: \Java\re 文 件 夹 下 。 
































安装 完 Java 后 ， 再 来 安装 Android SDK。 进 入 Android 开 发 者 官网 (http://developer.android.com/sdk/index.html) 下 载 开发 Android 程 序 使 用 的 ADT 包 。 它 是 一 个 集成 了 Android SDK 组 件 的 









































Eclipse， 使 用 它 可 以 直接 开发 Android 程 序 ， 而 省 去 了 在 原版 Eclipse 中 安装 插件 的 烦恼 。 下 载 后 解压 ， 将 其 重 命名 为 ADT， 并 放置 在 C: \Tools 文 件 夹 下 ， 这 个 文件 路 径 可 以 根据 自己 的 需要 更 改 。 如 果 需 
要 运行 Eclipse， 打 开 ADT 文 件 夹 ， 运 行 Eclipse.exe 即 可 。 
































安装 好 Android SDK 后 ， 还 需要 安装 编译 C++ 的 NDK。 到 NDK 官 方 网 站 (http://developer.android.com/tools/sdk/ndk/index.html) 下 载 最 新 的 NDK。 下 载 完 成 后 解压 到 C: \Tools 目 录 下 ， 将 其 


命名 为 ndk-r9d。 























最 后 安装 ANT。 打 开 ANT 官 网 (http://ant.apache.org/bindownload.cgi) 下 载 ANT。 下 载 后 解压 到 C: \Tools 目 录 下 ， 将 其 重 命名 为 ant。 











2.5.2 ”配置 Cocos2D-X 编 译 环境 











打开 “命令 与 提示 符 ”， 运 行 Cocos2D-X 根 目录 下 的 setup.py 文 件 ， 设 置 编译 环境 ， 代 码 如 下 : 











C:\Users\Fansy>cd C:\OutFile\cocos2d-x-3.2 
C:\OutFile\cocos2d-x-3.2>setup.py 
Setting up cocos2d-xhttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... 
-> Adding COCOS2D CONSOLE ROOT environment variablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... ALREADY ADDED 
-> Looking for NDK ROOT envrironment variablehttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): C:\Tools\ndk-r9d 
ADDED 
-- Added: NDK ROOT = C:\Tools\ndk-r9d 
-> Looking for ANDROID SDK ROOT envrironment variablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): C:\Tools\ADT\sdk ~ 
ADDED 
-> Added: ANDROID SDK ROOT = C:\Tools\ADT\sdk 
-> Looking for ANT ROOT envrironment variablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/... NOT FOUND 
Please enter its path (or press Enter to skip): C:\Tools\ant\bin ~ 
ADDED 
-> Added: ANT_ROOT = C:/Tools/ant/bin 
Set up successfull: 
NDK_ROOT was added into registry 


ANDROID SDK ROOT was added into registry 

ANT ROOT was added into registry 
Please restart the terminal or restart computer to make added system variables t 
ake effect 























运行 完成 后 ， 即 完成 了 环境 变量 的 设置 。 


注意 配置 完 环境 变量 需要 重新 启动 机 器 。 


25.3 ”编译 项 目 


在 运行 编译 之 前 ,我 们 需要 更 改 Android 对 应 的 make 文 件 。 找 到 程序 根 目录 /proj.android/jni/Android.mk 文 件 ， 将 其 内 容 更 改 为 如 下 : 





LOCAL PATH := $ (call my-dir) 
include $ (CLEAR VARS) 
LOCAL MODULE := cocos2dcpp_shared 
LOCAL MODULE FILENAME := libcocos2dcpp 
LOCAL SRC FILES := hellocpp/main.cpp \ 
ares http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/. ./http://www.hzcourse.com/resource/readBook?path=/openr 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/. ./http: //www.hzcourse .com/resource/readBook?path=/openr 
LOCAL_C_INCLUDES := Psi LOCAL PATH) /http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/0EBPS/Text/ . ./http: //www.hzcourse.com/resource/re 
http: //www.hzcourse .com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/../http: //www.hzcourse.com/resource/readBook?path=/or 
http: //www.hzcourse .com/resource/readBook?path=/openresources/teach 4 book /uncompressed/14903/OEBPS/Text/, ./nttp: //www.hzcourse.com/resource/readBook? 
LOCAL WHOLE STATIC LIBRARIES := cocos2dx static 
LOCAL WHOLE STATIC LIBRARIES += cocosdenshion_static 
LOCAL WHOLE STATIC LIBRARIES += box2d static 
LOCAL WHOLE STATIC LIBRARIES += cocostudio_ static 
include $ (BUILD SHARED ) LIBRARY) = 
$ (call import-module, 2d) 
$(call import-module, audio/android) 
$(call import-module, Box2D) 
$ (call import-module, editor-support/cocostudio) 





完成 这 样 的 更 改 后 ， 在 编译 时 会 编译 Cocostudio 库 。 更 改 这 个 文件 后 ， 即 可 编译 程序 了 。 打 开 “ 命 令 与 提示 符 ”， 进 入 到 C: \Code\HelloWorld 目 录 中 ， 运 行 如 下 命令 : 


cocos run -p android -j 4 
































编译 运行 后 即 可 将 程序 编译 出 Android 包 。 编 译 好 的 文件 会 放置 在 “ 根 目 录 \bin\debug\android” 中 。 使 用 数据 线 将 文件 复制 到 手机 上 安装 ， 即 可 在 手机 上 运行 游戏 。 























2.6 小 结 








通过 这 章 我 们 认识 了 Cocos2D-X 程 序 的 基本 层次 结构 ， 并 学 习 了 如 何 通过 编辑 器 编辑 一 个 界面 。 在 导出 编辑 好 的 界面 后 ， 我 们 可 以 通过 接口 将 其 加 载 到 程序 中 。 随 后 学 习 了 如 何 制作 点 击 响应 的 
数 ， 构 成 一 个 完整 的 程序 。 最 后 还 学 会 了 如 何 打包 并 安装 到 Android 手 机 上 。 在 下 一 章 中 ， 我 们 将 看 到 ， 如 何 使 钢琴 程序 的 元 素 更 加 丰富 。 
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第 3 章 钢琴 师 (下 ) 


“看 见 文 需 了 没 ?” 萌 神 晃 着 壮 硕 的 身躯 问 道 。 
“ 追 妹子 去 了 吧 ? 我 昨天 程序 做 完 交 货 了 ”， 劲 松 随口 答 道 。 


说 到 靖 ， 就 不 得 不 提 卖 靖 。 说 到 卖 靖 ， 有 不 得 不 提 装 靖 。 劲 松 一 直 认为 卖 靖 等 于 装 靖 。 萌 就 像 奶 油 ， 多 了 就 会 腊 ， 劣 质 的 会 让 人 反胃 。 当 遇 到 了 萌 神 ， 忽 然 发 现 ， 有 种 彰 不 是 装 出 来 的 ， 它 纯 天 然 无 污 
染 ， 只 要 愿意 卖 ， 人 人 都 会 买 。 萌 神 是 文 彪 取 的 名 字 ， 取 义 : 萌 到 极致 ， 谓 之 为 神 。 总 之 他 就 像 一 只 大 龙 猫 ， 总 会 出 其 不 意 地 萌 到 你 。 劲 松 总 在 想 : “这 胖 纸 天 生 就 是 被 派 来 卖 萌 的 吧 ? 或 者 是 荫 卖 得 多 
了 ， 就 会 变 成 了 胖子 ? ” 


萌 神 挠 挠 头 ， 说 道 : “ 猴 了 ， 一 起 去 吃饭 吧 。” 作 为 一 名 运 维 人 员 ， 萌 神 的 三 餐 还 算是 规律 ， 只 不 过 有 时 候 会 多 餐 。 须 史 ， 劲 松 和 萌 神 就 到 了 楼 下 的 餐馆 ， 却 看 见 正 吃饭 的 文 彪 。 两 人 凑 过 去 ， 打 探 情 


“有 个 词 叫 十 动 然 拒 ， 不 知道 你 们 听 没 听 过 ? ”这 是 文 彪 抬 头 的 第 一 句 话 。 
“好 像 没什么 印象 ， 所 以 妹子 追 到 了 ? ” 萌 神 嘿嘿 地 问 道 。 


“毛线 啊 ， 萌 神 你 又 卖 戎 。 十 分 感动 ， 然 后 拒绝 ， 是 追 到 的 节奏 吗 ? 不 过 我 文 彪 从 来 就 不 是 轻 言 放弃 的 人 ， 我 要 收拾 破碎 的 心 ， 重 组 成 利刃 ， 划 开 新 世代 。” 文 彪 虽 败 ， 却 无 半分 郁郁 之 色 ，“ 利 刃 遂 
成 ， 然 及 枉 、 蒜 ， 非 心力 之 所 及 也 。 仿 仰 仗 劲松 郊 ， 铸 裂 云 釜山 之 器 。” 


“你 们 是 穿梭 在 银河 的 火箭 队 。 白 洞 ， 和 白色 的 明天 在 等 着 你 们 。” 萌 神 听 了 半天 ， 置 出 了 这 么 一 句 。 

劲松 接着 萌 神话 头 附和 道 : “既然 你 诚心 诚意 的 请 求 了 ， 我 就 大 发 感 翡 告诉 你 ， 为 了 防止 世界 被 破坏 ， 为 了 守护 世界 的 和 平 ， 贯 彻 爱 与 真实 的 邪恶 ， 高 富 诈 版 钢琴 师 即 将 登 上 历史 舞台 。” 
这 时 服务 员 端 着 盖 饭 走 过 来 ， 用 异样 的 眼神 看 着 劲松 。 

“ 呀 ” 萌 神 突然 转向 服务 员 说 道 ，“ 我 好 像 还 没 点 。 不 对 劲松 点 了 ， 我 也 该 点 了 。 服 务 员 我 点 是 什么 来 着 ? 快 好 了 吧 ? ”。 

服务 员 翻 了 翻 单子 ， 说 : “他 点 了 ， 你 没 点 。” 


又 是 一 片 笑 声 ，“ 鸣 哈哈 ， 策 小 孩 ， 策 小 孩 ……” 


3.1 粒子 效果 








IR] 


要 将 钢琴 游戏 改 得 高 端 大 气 上 档次 ， 首 当 其 冲 的 就 是 加 入 粒子 效果 了 。 这 节 我 们 将 了 解 什么 是 粒子 效果 ， 并 添加 粒子 效果 到 程序 中 。 运 行 效果 如 








3-1 所 示 。 














图 3-1 添加 粒子 效果 图 


3.1.1 粒子 效果 原理 











在 Cocos2D-X 中 ， 粒 子 效果 是 通过 粒子 系统 来 实现 的 。 粒 子 系统 能 够 发 射出 很 多 小 的 粒子 ， 并 控制 它们 的 轨迹 、 颜 色 、 形 状 等 特性 。 粒 子 系统 在 管理 这 些小 的 粒子 的 同时 会 对 它们 进行 统一 泻 染 ， 因 此 
效率 并 不 会 太 低 。 粒 子 系统 最 主要 的 特点 在 于 ， 所 有 的 行为 都 是 随机 计算 出 来 的 ， 所 有 的 显示 效果 都 是 随机 的 。 因 此 它 通 常用 来 模拟 下 雨 、 雪 、 火 焰 等 视觉 效果 。 












































粒子 系统 的 核心 是 配置 文件 。 模 拟 的 所 有 现象 ， 都 是 通过 调整 一 项 项 数值 来 实现 的 。 当 然 ， 参 数 会 有 很 多 ， 例 如 所 受 重力 ， 产 生 粒 子 的 数量 ， 粒 子 的 存在 时 间 等 。 配 置 好 这 些 数据 ， 粒 子 系统 就 会 根据 
这 些 参数 来 泻 染 粒子 效果 。 所 以 现在 的 问题 是 如 何 写 出 这 个 配置 文件 ， 或 者 说 如 何 确定 这 些 参数 。 还 记得 在 第 2 章 我 们 是 怎么 做 的 吗 ” 只 赁 脑袋 是 想 不 出 的 ， 还 是 借助 编辑 器 吧 。 














3.1.2 ”粒子 编辑 器 











粒子 编辑 器 有 很 多 种 ， 比 如 Windows 平 台 上 的 Particle-editor 和 Particle-builder，Mac 平 台 上 的 Particle Designer 等 。 这 些 编辑 器 本 质 上 都 一 样 : 调整 出 一 个 合适 的 配置 文件 。 这 里 我 们 使 用 Mac 平 台 
的 Particle Designer 进 行 讲解 ， 因 为 它 预制 了 很 多 的 粒子 效果 ， 并 且 有 一 个 比较 友好 的 界面 。 这 款 软件 是 由 71Squared 开 发 的 ， 是 一 款 收 费 的 软件 ， 可 以 从 官网 下 载 。 

































































运行 Particle Designer 我 们 可 以 看 到 两 个 界面 ， 大 的 是 主 界 面 ， 小 的 是 如 图 3-2 所 示 的 模拟 器 界面 ， 它 可 以 实时 模拟 出 粒子 运行 时 的 效果 。 


iPhone Portrait 





Orientation iPad Clear Background 











图 3-2 ”粒子 模拟 器 


另 一 个 界面 则 是 编辑 界面 ， 它 是 预制 效果 的 展示 窗口 ， 从 中 我 们 可 以 点 击 选取 喜欢 的 效果 。 点 击 主 界面 右上 角 的 “Emmter Config” 就 可 以 进入 如 图 3-3 所 示 的 编辑 界面 进行 参数 调整 了 。 这 里 的 参数 


非常 多 ， 大 家 可 以 根据 自己 的 需要 来 进行 调整 。 
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我 们 在 主 界面 的 预制 粒子 效果 中 选择 一 个 能 烘托 浪漫 氛围 的 效果 ， 这 里 我 们 选择 “magicle moment lights” 
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图 3-3 ”粒子 编辑 界面 


， 如 图 3-4 所 示 。 
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图 3-4 选择 预制 效果 















































选择 好 后 点 击 上 面 工具 栏 中 的 “Save As”， 然 后 在 弹出 的 对 话 框 的 “File Format” 下 拉 菜 单 中 选择 “cocos2d (plist) ”， 并 在 “Save As: ”后 面 的 输入 框 中 更 改名 字 ， 最 后 点 击 “save” 导 出 我 们 
的 配置 文件 ， 如 图 3-5 所 示 。 






























Wf Embed texture 
Texture File Name: defaultEmitter 
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图 3-5 保存 导出 








成 功 导 出 的 是 一 个 .plist 文 件 ， 它 从 本 质 上 讲 就 是 粒子 的 配置 文件 。 我 们 将 其 复制 到 钢琴 项 目的 Resources 目 录 下 。 在 随 书 光盘 中 也 能 找到 这 个 文件 。 


3.1.3 ”加 载 到 程序 中 


由 于 我 们 已 经 将 粒子 效果 编辑 好 了 ， 因 此 加 载 时 也 就 不 需要 再 更 改 参 数 。 打 开 在 第 2 章 使 用 的 钢琴 项 目 ， 找 到 HelloWorldScene.cpp， 在 init 代 码 中 添加 如 下 代码 : 








ParticleSystemQuad* particle = ParticleSystemQuad: :create("slowLight.plist") ; 
addChild (particle); 





“ParticlesystemQuad” 被 视 为 一 个 粒子 播放 器 ， 可 以 播放 编辑 好 的 粒子 效果 。 它 本 身 也 是 一 个 元 素 节点 ， 所 以 我 们 可 以 使 用 addChild 函 数 把 它 加 到 场景 中 。 


编译 项 目 运行 即 可 。 


3.2 动作 


在 任何 一 个 游戏 中 ， 节 点 元 素 不 会 都 是 静止 的 。 移 动 、 明 暗 变化 、 颜 色 变化 等 都 要 通过 动作 (Action) 来 完成 ， 因 此 也 可 以 说 动作 是 游戏 的 根本 。 在 这 一 节 中 我 们 将 介绍 如 何 使 用 简单 的 动作 来 移动 元 
素 。 创 建 一 个 循环 的 往返 运动 ， 运 行 效果 如 图 3-6 所 示 。 











图 3-6 ”循环 的 往返 运动 

































































3.2.1 ”重要 示例 
既然 动作 这 么 重要 ， 我 们 就 来 一 个 一 个 学 习 吧 。 不 ， 在 这 里 ， 甚 至 在 整 本 书 中 ， 我 们 都 不 采用 文档 式 教学 。 首 先 ， 在 互 
于 ， 最 主要 的 原因 是 Cocos2D-X 





另外 ， 随 着 技术 的 更 新 ， 文 档 般 的 教学 必 会 失去 它 的 实效 性 。 授 人 以 鱼 不 如 授 人 以 渔 。 最 











殿 网 如 此 发 达 的 今天 ， 我 们 需要 的 并 不 是 如 文档 般 详 细 的 指导 ， 而 是 一 个 方向 。 
身 有 一 个 非常 好 的 示例 ， 它 几乎 涵盖 了 这 套 引擎 所 有 的 特性 。 每 当 我 们 有 疑问 


时 ， 都 可 以 去 查看 源 代码 ， 这 也 是 开源 的 优势 。 
方法 都 可 以 在 其 中 找到 。 接 下 来 我 们 就 以 动作 为 例 ， 了 解 一 下 如 何 通 

















Cocos2D-X 中 最 重要 的 示例 是 TestCpp。 我 们 曾 在 第 1 章 搭建 环境 时 编译 过 这 个 项 目 。 它 是 一 个 引擎 特性 列表 ， 大 多 数 函 数 的 使 


过 TestCpp 来 学 习 相 应 特性 。 


3.2.2 ”学 习 方式 






































在 运行 TestCpp 后 我 们 发 现 ， 动 作 相关 的 标签 名 为 Action Test。 打 开工 程 ， 找 到 TestCpp， 点 开 它 的 Class 项 ， 会 发 现 


文件 了 ， 如 图 3-7 所 示 。 














其 中 有 Action Test 组 ， 再 点 开 ， 


会 发 现 一 个 ActionTest.cpp， 它 就 是 我 们 要 找 的 
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图 3-7 ”动作 项 目 示 例 





















































我 们 要 使 用 的 动作 是 MoveBy。 正 像 示例 中 展示 的 那样 ， 这 个 动作 控制 着 元 素 从 一 点 移动 到 另 一 点 。 接 下 来 我 们 找到 相应 的 代码 位 置 看 一 下 究竟 如 何 使 用 动作 。 











技巧 ”有 的 例子 中 代码 量 特别 大 ， 定 位 某 个 具体 功能 并 不 太 容易 。 我 们 可 以 在 相应 的 代码 文件 中 搜索 界面 上 的 文字 ， 例 如 ， 在 这 个 示例 中 ， 我 们 可 以 搜索 “MoveTo/MoveBy” 来 定位 代码 。 这 些 文字 通 


常 写 在 每 个 类 的 “subtitle” 的 函数 中 ， 通 过 搜索 可 以 定位 到 对 应 类 的 位 置 ， 在 类 中 就 可 以 找到 相应 的 实现 函数 。 

















我 们 找到 OnEnter 函 数 ， 这 个 函数 会 在 进入 场景 的 时 候 调用 ， 所 以 通常 会 用 作 每 一 个 场景 的 初始 预 处 理 函数 ， 如 代码 清单 3-1 所 示 。 





























代码 清单 3-1 ”动作 实现 函数 





void ActionMove: :onEnter () 
{ 
ActionsDemo: :onEnter () ; 
centerSprites (3); 
auto s = Director: :getInstance()->getWinSize(); 
auto actionTo = MoveTo::create(2, Point(s.width-40, s.height-40)); 
auto actionBy = MoveBy::create(2, Point (80,80)); 
auto actionByBack = actionBy->reverse () 7 
tamara->runAction( actionTo); 
“grossini->runAction ( Sequence: :create(actionBy, actionByBack, NULL)); 
_kathia->runAction (MoveTo::create(1, Point (40,40))); 
} 















































在 上 面 的 代码 中 ， 我 们 只 需 关注 三 个 点 : 创建 、 配 置 、 调 用 加 载 。 通 常 创建 和 配置 在 一 起 。 在 这 个 示例 中 ，MoveBy::create 就 是 创建 与 配置 ， 下 面 的 runAction 就 是 调用 加 载 ， 调 用 runAction 函 数 的 就 











是 
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3-7 中 的 那 三 个 小 人 了 。 可 见 MoveBy 的 作用 是 使 小 人 (Sprite) 移动 某 个 偏 移 量 ， 调 用 方法 就 是 调用 它 自己 的 runAction。 

















3.2.3 ”实际 使 用 














接 下 来 我 们 看 看 如 何在 自己 的 项 目 中 使 用 Action。 

















首先 在 随 书 光盘 中 找到 “heart.png” 这 张 图 片 ， 将 其 加 入 到 Resources 目 录 中 。 然 后 打开 钢琴 项 目 找到 init 函 数 ， 添 加 如 代码 清单 3-2 所 示 代码 。 



































代码 清单 3-2 ”添加 移动 元 素 





auto heart = Sprite::create ("heart.png") ; 

auto visibleSize = Director: :getInstance () ->getVisibleSize (); 
heart->setPosition (visibleSize.width/5,visibleSize.height/5*4) ; 
auto move = MoveBy::create(5, Point (visibleSize.width/6,0)); 
auto rev = move->reverse () ; 

auto actionSequence = Sequence: :Create (move, rev, NULL); 
heart->runAction (RepeatForever: : create (actionSequence) ) ; 
addChild (heart); 






































调用 create 即 可 创建 一 个 Sprite， 参 数 是 所 使 用 的 纹理 。 创 建 好 后 我 们 就 可 以 着 手 移动 它 。 移 动 Sprite 需 要 选 定 起 点 和 终点 。 既 然 谈 到 了 选 点 ， 我 们 就 要 说 一 下 坐标 系 。 在 Cocos2D-X 中 使 用 的 是 
































OpenGL 的 坐标 ， 左 下 角 为 0 点 ， 横 向 向 右 为 x 轴 ， 横 向 向 上 为 y 轴 。 在 这 个 示例 中 ， 起 点 选 在 屏幕 的 大 上 ，x 为 屏幕 宽度 的 1/5，y 为 屏幕 高 度 的 4/5。 调 用 sprite 的 setPosition 函 数 即 可 设置 点 的 位 置 。 


会 变 


注意 ”凡是 涉及 点 坐标 的 情况 ， 尽 量 不 要 使 用 绝对 的 值 ， 要 根据 屏幕 的 大 小 进行 计算 ， 和 否则 在 不 同 分 辩 率 的 屏幕 上 ， 程 序 运行 起 来 会 出 现 很 大 差异 。 这 种 差异 在 项 目 最 后 进行 真 机 测试 时 会 体现 ， 程 序 
变 得 非常 难 维护 。 




















然后 我 们 调用 MoveBy::create 这 个 函数 来 创建 一 个 移动 的 动作 ， 移 动 的 距离 就 是 1/6 的 屏幕 完 度 。 将 Sprite 移 动 过 去 ， 还 要 移动 回来 。 我 们 可 以 通过 调用 reverse 函 数 ， 来 方便 地 “ 倒 带 ”一 个 动作 。 有 


























了 两 个 方向 的 移动 ， 我 们 还 要 把 这 两 个 动作 连 起 来 。 对 于 按 顺序 执行 的 动作 ， 要 使 用 Sequence。Sequence 本 身 也 是 一 个 动作 。 





注意 ”在 创建 Sequence 的 时 候 ，create 函 数 最 后 一 个 参数 必须 为 NULL。 这 个 参数 作为 序列 终止 的 标志 ， 缺 少 它 将 导致 程序 崩溃 。 





最 后 还 希望 这 两 个 移动 的 动作 能 够 无 限 循环 。 可 以 要 构建 一 个 RepeatForever 动 作 ， 将 刚才 的 一 组 动作 作为 它 的 参数 传 进 去 ， 这 样 就 可 以 创建 一 个 无 限 循环 的 动作 了 。 




















在 创建 好 动作 后 调用 runAction 函 数 ， 即 可 执行 动作 。 最 后 干 万 别 忘 了 使 用 addChild 函 数 将 创建 的 Sprite 作 为 子 元 素 加 到 场景 根 节点 中 。 


























图 片 在 











编译 运行 程序 即 可 看 见 心 形 的 


3.3 文字 





在 游戏 中 ， 文 字 的 年 
CocoStudio 中 如 何 使 

















3.3.1 编辑 自 定义 字体 


游戏 风格 不 同 ， 文 字 当 然 也 要 根 


SSUES MM. WRK, MF 


幕 的 左上 来 回 移动 。 




















在 钢琴 游戏 中 ， 我 们 要 在 琴键 上 方 加 一 行 字 。 在 这 一 节 中 我 们 将 会 看 到 如 何 使 














来 记录 和 提示 某 些 数量 和 功能 。 
定义 的 文字 ， 运 行 效果 如 





3-8 所 示 。 


中 | 














编辑 的 字体 。 我 们 在 应 上 








中 加 入 一 个 

















居 风 格 





图 3-8 自 定义 文字 效果 





字体 ， 以 及 在 





编辑 器 编辑 纹理 








。Glyph Designer 的 优点 在 于 它 的 











的 是 Glyph Designer， 它 是 由 71Square 开 发 的 制作 字体 的 工 . 























也 很 多 ， 这 里 我 们 使 








自己 定制 。 编 辑 文字 的 工 





较 友好 ， 缺 点 是 它 是 一 个 商业 性 的 软件 ， 并 且 只 有 Mac 版 。 





Glyph Designer 的 界 
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图 3-9 所 示 。 
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图 3-9 Glyph Designet 的 界面 


























我 们 看 到 ， 图 3-9 的 左 侧 有 很 多 预制 的 字体 ， 可 以 根据 需要 搜索 字体 。 左 侧 下 方 的 滑动 条 用 于 调整 字号 的 大 小 。 字 号 越 大 最 后 生成 的 文件 也 越 大 ， 所 以 我 们 要 根据 需要 调整 字号 。 这 里 我 们 使 用 的 字体 
是 “zapfino”， 字 号 不 做 修改 。 























我 们 可 以 通过 更 改 图 3-9 右 侧 部 分 来 更 改 显 示 的 样式 ， 比 如 调整 阴影 的 模式 、 渐 进 变化 颜色 等 。 右 侧 最 后 一 部 分 是 字体 包含 的 字符 ， 其 中 出 现 的 字符 会 被 添加 到 生成 的 文件 中 。 





生成 的 文件 有 两 个 ， 一 个 是 图 片 ， 一 个 是 FNT 文 件 。FNT 文 件 其 实 是 一 个 配置 文件 ， 它 描述 了 某 一 个 字符 在 图 片 中 的 区 域 。 




















简单 说 来 ， 自 定义 字体 起 到 的 是 蔡 换 字符 的 效果 。 














例如 : 将 文字 设置 成 “ABC”， 程序 会 在 显示 时 将 “ABC” 蔡 换 成 图 片 中 的 “ABC”。 图 片 中 的 “A” 可 以 在 图 片 的 左上 角 ， 它 的 具体 区 域 位 置 写 在 FNT 文 件 中 。 程 序 依据 这 个 位 置 ， 把 那 部 分 
图 “ 切 ”出 来 蔡 换 显示 。 再 比如 : “B” 并 没有 配置 在 包含 字符 中 ， 在 替换 时 从 FNT 文 件 中 找 不 到 “B”， 就 显示 不 出 了 。 

















这 里 我 们 使 用 默认 配置 ， 不 做 修改 。 点 击 右上 角 的 “Export”， 将 名 字 更 改 为 “flyFont”。 注 意 看 导出 类 型 是 否 为 .fnt (cocos2d Text) ， 确 认 后 点 击 保存 ， 并 将 导出 文件 复制 到 CocoStudio 工 程 
A “Resources” BFR. 





3.3.2 ”在 CocoStudio 中 使 用 字体 


编辑 完 字体 后 ， 我 们 要 在 编辑 器 中 使 用 文字 。 找 到 先前 在 编辑 器 中 编辑 的 钢琴 项 目 ， 将 导出 的 两 个 自 定义 字体 文件 放置 到 项 目的 “Resources” 目 录 中 ， 然 后 打开 项 目 。 























我 们 在 左边 的 工具 栏 中 找到 自 定义 字体 ， 将 其 拖 动 到 工作 区 中 。 注 意 ， 其 对 象 层级 关系 应 该 与 “Main” 平 级 ， 而 不 是 在 其 中 。 在 自 定义 字体 创建 成 功 后， 将 它 的 位 置 调整 到 屏幕 的 上 中 位 置 ， 并 将 其 名 
字 更 改 为 “Words”， 将 Tag 设 为 100。 注 意 其 泻 染 层级 要 大 于 “Main” 的 泻 染 层级 ， 否 则 会 被 “Main” 层 遮盖 住 。 编 辑 好 的 效果 如 图 3-10 所 示 。 
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图 3-10 ”创建 自 定义 字体 








技巧 ”点 击 对 象 结 构 中 对 应 标签 后 面 的 “显示 /隐藏 ”， 可 以 将 不 需要 显示 的 部 分 隐藏 。 例 如 ， 我 们 将 “Main” 隐 藏 ， 这 样 添加 的 字体 就 不 会 被 添加 成 Main 的 子 级 元 素 。 





接着 我 们 要 更 改 默认 的 字体 显示 。 将 光盘 文件 中 的 “flyFont.fnt” 拖 动 到 “属性 ”一 “特性 ”一 “FNT 字 体 文件 ”后 面 的 输入 框 中 ， 并 将 下 面 的 文本 更 改 为 “Forever Love”。 然 后 按 “Ctrl+E” 导 出 


项 目 。 





将 新 导出 的 文件 复制 到 程序 “piano” 的 “Resources” 目 录 下 ， 蔡 换 原 有 文件 。 


编译 运行 程序 ， 即 可 看 到 添加 的 文字 。 


3.4 ”输入 信息 

















既然 选择 了 定制 ， 就 得 定制 到 底 。 在 上 一 节 中 我 们 创建 了 自 定义 字体 ， 并 将 它 写 在 了 琴键 上 。 在 这 节 中 我 们 将 介绍 如 何 让 用 户 通过 输入 来 更 改 显 示 字 。 


3.4.1 编辑 输入 区 域 


运行 CocoStudio 的 UI 编辑 器 ， 打 开 钢 琴 项 目 。 

















在 左 侧 工具 栏 中 找到 输入 框 ， 将 其 拖 动 至 工作 区 ， 对 其 属性 进行 如 下 修改 : 








“ 确保 交互 被 勾 选 。 

- 更 改名 字 为 “input” 
“更改 Tag 为 : 101 

“ 将 字号 改 为 30。 

“ 去掉 文 本 中 的 内 容 。 
“ 将 占 位 文本 改 为 “ 


JER 占 位 文本 也 是 会 显示 出 来 的 。 这 里 我 们 要 做 一 个 隐藏 的 输入 框 ， 所 以 用 空格 来 占 位 ， 当 点 击 到 对 应 区 域 上 时 就 可 以 输入 信息 。 





更 改 好 属性 并 保存 后 导出 项 目 ， 将 导出 文件 复制 到 项 目的 “Resources” 中 。 

















3.4.2 ”添加 输入 设置 











在 默认 情况 下 输入 被 写 到 输入 框 中 ， 这 并 不 是 我 们 想 要 的 效果 。 我 们 需要 输入 能 够 改变 的 自 定义 文字 。 具 体 来 说 是 : 在 输入 完成 后 ， 要 更 改 自 定义 文字 ， 并 将 输入 框 中 的 文字 去 掉 。 接 下 来 我 们 看 看 怎 
么 做 。 





打开 “HelloWorldScene.h”， 添加 代码 清单 3-4 中 声明 部 分 。 打 开 “HelloWorldScene.cpp”， 在 init 函 数 中 添加 如 代码 清单 3-3 中 注册 部 分 所 示 代 码 。 





代码 清单 3-3 ”设置 点 击 监听 





// 声 明 部 分 ， 写 在 HelloWorldscene.h 中 

void textInput (cocos2d: :Ref* object, cocos2d::ui::TextFiledEventType type) ; 

// 注 册 部 分 ， 写 在 HelloWorldScene .cpp 中 

auto input = dynamic cast<TextField*> (widget->getChildByName ("input") ); 

input- >addEventListenerTextField (this, textfieldeventselector (HelloWorld: :textInput)); 














仔细 看 会 发 现 ， 这 种 设置 方式 与 先前 我 们 为 琴键 设置 响应 方式 是 一 样 的 ， 只 不 过 是 函数 名 和 类 型 名 有 所 变化 。 接 下 来 我 们 实现 这 个 函数 ， 在 “HelloWoridSscene.cpp” 中 加 入 “textlnput” 的 响应 函 
数 ， 如 代码 清单 3-4 所 示 。 





代码 清单 3-4 ”实现 响应 函数 


void HelloWorld: :textInput (Ref* object, TextFiledEventType type) 


switch (type) { 

case TEXTFIELD EVENT DETACH WITH IME: 

{ 
TextField* textField = dynamic_cast<TextField*> (object) ; 
std::string words = textField->getStringValue(); 
TextBMFont* label =dynamic_cast<TextBMFont*>(textField->getParent () 

->getChildByTag (100) ) ; 

label->setText (words.c_str()); 
textField->setText ("") 7 

} 
break; 

default: 
break; 





























这 里 的 逻辑 就 很 简单 了 。 首 先 判断 事件 类 型 ， 当 类 型 为 “TEXTFIELD_EVENT_DETACH_WITH_IME” 时 ， 该 事件 表示 用 户 输 入 完成 。 然 后 将 用 户 输 入 的 内 容 取出 来 。 接 着 将 内 容 设置 到 自 定义 字体 上 。 
最 后 将 输入 框 中 的 内 容 置 空 。 





提示 “由 于 自 定义 字体 和 输入 框 是 同 级 ， 因 此 我 们 在 取 自 定义 字体 时 ， 要 先 取 到 它 的 父 节点 。 在 通过 “gtParent” 取 到 父 节点 后 ， 再 通过 Tag 取 到 对 应 的 子 节点 。 
编译 运行 程序 即 可 完成 这 个 功能 了 。 点 击 右上 部 分 ， 可 设置 文字 。 


注意 目前 版 本 的 Windows 模 拟 器 输入 还 有 些小 问题 ， 在 激活 输入 功能 时 ， 不 会 弹出 输入 提示 。 在 此 处 点 击 后 可 以 直接 输入 内 容 。 


34.3 ”信息 存储 





还 有 个 小 问题 : 每 当 程 序 退 出 后 ， 输 入 的 信息 就 消失 了 ， 再 进入 还 要 再 输入 一 次 。 因 此 ， 我 们 要 将 信息 存 下 来 。 























在 Cocos2D-X 中 使 用 UserDefault 可 以 保存 简单 的 用 户 信息 。 使 用 UserDefault 会 创建 一 个 XML 文件 来 保存 对 应 的 键 值 。 我 们 只 要 在 init 函 数 中 加 入 读 取 ， 在 textlnput 函 数 中 加 入 写 入 即 可 ， 如 代码 清单 
3-5 所 示 。 


代码 清单 3-5 “信息 存储 





读 取 ， 写 在 init 中 

: :String str = UserDefault: :getInstance ()->getStringForKey ("userstr"); 
auto label = dynamic_cast<TextBMFont*> (widget->getChildByName ("Words") ) ; 
label->setText (str.c str()); 
// 信 息 写 入 ， 写 在 textInput 中 
UserDefault: :getInstance ()->setStringForKey ("userStr", words); 
UserDefault: :getInstance ()->flush (); 











UserDefault 是 一 个 单 例 ， 在 使 用 时 会 调用 getlnstance 函 数 ， 并 通过 相应 类 型 的 “get/set” 进 行 读 取 和 设置 。 

















注意 ”在 写 入 时 ， 设 置 好 键 值 后 一 定 要 调用 flush 函 数 ， 将 内 存 中 的 信息 保存 到 文件 中 。 


编译 运行 程序 就 能 够 保存 信息 了 。 


3.5 We 





























这 一 章 依托 上 一 章 编写 的 钢琴 游戏 进行 了 改进 ， 介 绍 了 粒子 系统 的 使 用 ， 了 解 如 何 编写 动作 ， 还 讲解 了 如 何 自学 对 应 动作 的 实现 ， 以 及 如 何 制作 、 使 用 自 定义 字体 ， 最 后 ， 介 绍 了 用 户 信息 的 输入 和 持 
久 化 存储 。 掌 握 了 这 些 基础 知识 ， 我 们 就 可 以 考虑 制作 一 个 更 复杂 的 游戏 了 。 
































第 二 部 分 “开发 实战 


“第 4 章 飞机 空战 (上 ) 
“第 5 章 飞机 空战 (下 ) 
-BOF ” 打 砖 块 
“第 7 章 wy (上 ) 


(RSE Ww (下 ) 


第 4 章 ”飞机 空战 (E) 


“一 切 有 为 法 ， 如 梦幻 泡影 。 如 露 亦 如 电 ， 应 作 如 是 观 。” 佛 家 的 驮 言 很 有 意思 ， 第 一 眼看 去 总 是 太 过 玄妙 ， 时 移 世 易 ， 回 头 看 却 发 现 不 过 是 些 质朴 的 句子 。 伴 随 着 文 彪 说 出 那个 名 字 ， 间 时 的 记忆 ， 
如 埋伏 已 久 的 铁骑 听 到 了 冲锋 的 信号 ， 呼 啸 着 瞬间 包围 了 劲松 。SK 说 ， 故 事 太 俗 ， 像 韩剧 。 劲 松 也 就 回应 ， 是 像 韩剧 ， 但 我 不 是 主角 。 


一 段 时 间 之 内 ， 大 家 都 绝口 不 提 这 件 事 。 只 是 知道 文 彪 又 败 了 ， 妹 子 说 是 有 男 朋友 了 。 算 是 比较 官方 的 拒绝 。 不 过 劲松 看 到 钢琴 上 写 的 名 字 时 ， 发 现 这 个 妹子 自己 认识 。 目 测 关系 还 不 一 般 。 


这 件 事情 可 赂 坏 了 朝 朝 。 朝 朝 这 名 字 大 概 也 是 文 开 起 的 。 他 名 字 中 有 一 个 “ 朝 ” 字 ， 此 处 的 朝 朝 ， 取 音 “ 招 ”。 作 为 八卦 之 神 ， 自 然 汇 集 了 各 种 小 道 消息 。 比 如 要 发 钱 了 ， 要 放假 了 ， 哪 个 部 门 出 了 什 
么 事 之 类 的 ， 问 他 保证 知道 。 劲 松 总 觉得 他 的 职位 恰到好处 : 数据 分 析 。 分 析 数 据 的 同时 ， 满 足 他 打探 小 道 消息 的 欲望 。 


劲松 原本 要 写 一 个 飞机 空战 的 游戏 ， 却 被 文 彪 拉 去 写 钢 琴师 了 。 现 在 钢琴 也 算 完 成 ， 就 整理 思路 ， 着 手写 飞机 空战 。 不 过 有 时 候 很 难 集中 精神 ， 因 为 朝 朝 总 是 不 时 的 出 现 。 劲 松 没 有 萌 神 那 两 下 子 ， 卖 
个 靖 给 朝 朝 就 能 毛 塞 过 去 ， 只 好 挥 挥手 右 他 走 ， 或 者 推 他 到 一 边 去 。 


这 天 ， 劲 松 完成 了 室 战 游戏 的 大 部 分 工作 ， 心 情 不 错 ， 加 上 是 周末 ， 大 家 约定 晚上 一 起 吃 烧 烧 。“ 四 十 羊 ， 四 十 牛 ， 十 篇、 十 心 、 十 菜 卷 ， 每 人 一 个 烤 鸡 怒 ， 外 加 一 打 冰 啤酒 。” 作 为 烧 串 的 忠实 粉 
丝 ， 点 餐 什么 的 ，SK 早 已 轻车熟路 。 酒 过 三 巡 ， 朝 朝 终于 丽 不 住 又 开始 打探 起 来 。 萌 神 也 跟着 卖 戎 起 哄 。 


“我 看 顶 多 也 就 是 系 花 级 别 的 吧 ， 校 花 还 欠 火 候 ”， 文 彪 说 道 ，“ 不 就 是 个 妹子 么 ， 你 不 常 说 什么 如 露 如 电 的 ， 还 以 为 你 版 依 佛门 了 。 摘 了 半天 ， 都 是 忽悠 啊 ， 自 己 也 是 看 不 开 。” 
劲松 沉默 了 一 会 ， 说 道 : “好 吧 ， 不 过 ，It”salongstory”。 

“时 间 还 不 有 的 是 ，” 说 完 ，SK 捏 头 喊 道 ，“ 老 板 ， 再 来 一 打 啤 酒 ”。 
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“ORRAMRILAE TM.” Bide. 


4.1 飞机 起 飞 


在 这 一 章 我 们 要 编写 一 个 简单 的 空战 游戏 。 





























与 之 前 的 钢琴 不 同 ， 飞 机 游戏 要 求 每 一 个 元 素 自身 要 有 变化 。 飞 起 来 的 飞机 如 果 是 静止 的 图 片 ， 看 起 来 就 会 很 不 舒服 。 所 以 在 这 一 节 中 ， 我 们 来 学 习 如 何 使 用 CocoStudio 的 动画 编辑 器 制作 简单 的 动 
画 。 完 成 效果 如 图 4-1 所 示 。 
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图 4-1 





“三 军 未 动 ， 粮 草 先 行 ”， 在 真正 编辑 之 前 ， 我 们 先 把 项 目的 目录 结构 创建 好 。 














飞机 的 动画 运行 效果 





首先 ， 我 们 新 建 一 个 名 为 “planeGame” 的 目录 ， 再 在 其 中 创建 一 个 名 为 “Texture” 的 文件 夹 ， 在 光盘 文件 中 找到 “Chapter plane” 文 件 夹 ， 将 其 中 的 内 容 复制 到 这 个 目录 下 。 


运行 CocoStudio， 在 主 界面 中 选择 “Animation Editor”， 打 开动 画 编辑 器 。 点 击 菜单 “文件 ”一 “新 建 项 目 ” 新 建 一 个 名 为 “Hero” 的 项 目 。 











点 击 “ 资 源 ”中 的 “添加 文件 来”， 选 择 刚 才 复 制 的 资源 的 目标 目录 。 刷 新 一 下 资源 列表 ， 就 能 








得 我 们 添加 的 文件 了 。 





我 们 要 制作 的 是 一 个 飞机 飞 动 的 动画 ， 它 由 两 张 图 组 成 。 以 主角 为 例 ， 它 们 分 别 是 “Hero1.png” 与 “Hero2.png” 这 两 张 。 只 要 隔 一 段 时 间 ， 换 一 张 图 片 进行 显示 ， 就 能 达到 动画 的 效果 。 























常识 ”通常 将 这 种 做 法 称 为 “序列 帧 ”。 由 美术 人 员 制 作 一 系列 的 动画 切 图 ， 再 用 程序 “播放 ”出 来 。 大 多 数 动画 效果 都 是 使 用 这 种 方式 实现 的 。 








从 “资源 ”中 拖 动 “Hero1.png” 到 工作 区 ， 这 样 就 创建 了 一 个 元 素 。 在 “对 象 结构 ”选项 卡 中 双击 刚刚 建 好 的 “Layer1” 





点 击 左上 角 的 “形体 模式 ”， 切 换 到 动画 模式 。 








， 将 其 重 命名 为 “Hero”。 

















在 切换 模式 后 ， 我 们 不 难 发 现 ， 在 动作 列表 中 ， 编 辑 器 自动 为 我 们 创建 了 一 个 动作 ， 双 击 它 ， 将 其 改名 为 “Heroldle”。 


然后 我 们 就 可 以 开始 编辑 动画 了 。 编 辑 方式 与 Flash 操 作 基 本 相同 ， 我 们 在 10 帧 与 20 帧 处 分 别 插入 关键 帧 。 然 后 在 10 帧 处 ， 拖 动 “Hero2.png” 到 上 方 “属性 ”中 的 








辑 后 如 图 4-2 所 示 。 
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图 4-2 ”编辑 帧 动画 




















编辑 完成 后 可 以 点 击 上 方 的 播放 按钮 来 预览 动画 效果 。 检 查 没有 问题 ， 保 存 并 导出 文件 。 采 











默认 配置 导出 后 ， 我 们 可 以 发 现 三 个 文件 ， 其 中 有 我 们 熟悉 的 Json 文 件 。 与 之 前 UI 编辑 器 导出 的 Json 相 




















同 ， 这 里 的 Json 文 件 用 来 记录 配置 ， 供 程序 读 取 导入 。 

















它们 是 程序 














来 加 载 图 像 纹理 的 文件 。 就 像 之 前 我 们 提 到 的 自 定义 字体 一 样 ， 这 次 是 将 程序 





另外 还 有 两 个 文件 ， 分 别 是 “plan0.png” 与 “plan0.plist”， 
个 plist 配 置 文件 来 记录 配置 。 在 实际 使 



































时 ， 程 序 会 “ 切 ”出 图 片 中 的 区 域 ， 把 区 域 中 的 部 分 当做 一 张 图 片 使 用 。 














到 的 所 有 资源 都 放 到 了 一 张 图 片 中 ， 通 过 一 












































依照 先前 介绍 的 方法 ， 创 建 一 个 名 为 “plane” 的 工程 ， 编 译 运行 ， 确 保 原始 工程 正确 。 
为 工程 添加 “libGUL.lib” 、 “libCocosStuido.lib”、 


配置 好 环境 后 ， 将 编辑 导出 的 动画 与 纹理 文件 复制 到 工程 的 “Resources” 目 录 下 。 


“libExtensions.lib” 三 个 依赖 库 ， 并 添加 “cocos” 与 “editor-support” 包 含 目录 ， 




















体 步 骤 可 以 参照 2.3 节 。 





在 “HelloWorldscene.h” 中 添加 代码 清单 4-1 中 包含 文件 的 部 分 ， 在 “HelloWorld-Scene.cpp” 文 件 中 添加 命名 空间 cocostudio， 并 更 改 init 函 数 如 代码 清单 4-1 所 示 。 


代码 清单 4-1 ”加载 动画 





// 添 加 头 文件 包含 添加 到 HelloWorlgdSscene.h 
#include "cocostudio/CocoStudio.h" 

// 添 加 命名 空间 

using namespace cocostudio; 

// 更 改 init 

bool HelloWorld: :init() 


A A LE 
irst 


1. super init firs 
if ( !Layer::init() ) 


{ 


} 

Size visibleSize = Director: :getInstance()-—>getVisibleSize(); 

ArmatureDataManager: :get Instance () ->addArmatureFileInfo ("Hero/Hero.ExportJson") ; 
Armature *plane = Armature: :create ("Hero"); 

plane->getAnimation () ->play ("HeroIdle") ; 

plane->setPosition (Point (visibleSize.width/2, visibleSize.height/2) ); 

addChild (plane) ; 

return true; 


return false; 























其 中 ， 动 画 的 导出 文件 “plane.ExportJson” 是 一 个 Json 文 件 ， 加 载 它 使 用 的 是 ArmatureManager 中 的 方法 。ArmatureManager 是 一 个 单 例 类 ， 用 来 管理 整个 场景 中 的 Armature。 









































播放 动画 的 体系 结构 是 三 层 的 架构 : 其 中 ArmatureManager 最 大 ， 管 理 所 有 的 导出 文件 ;然后 是 Armature， 实 例 化 某 一 个 导出 文件 ; 最 后 是 Animation ， 管 理 具体 动画 。 




















我 们 可 以 看 到 ， 载 入 到 程序 中 的 动画 模型 是 一 个 Armature 对 象 ， 它 可 以 通过 “Hero” 这 个 名 称 创建 实例 。Armature 是 Node 的 子 类 ， 因 此 也 是 一 个 元 素 ， 可 以 直接 通过 addChild 添 加 到 父 节点 中 。 我 
们 在 编辑 器 中 编辑 的 动画 “Heroldle”， 是 一 个 Animation， 它 被 封装 在 Armature 中 。 我 们 播放 动画 使 用 的 都 是 Animation 中 的 方法 。 这 里 我 们 播放 名 称 为 “Heroldle” 的 动画 。 





























编译 运行 ， 即 可 看 到 飞机 在 屏幕 中 心 飞 行 ， 如 图 4-3 所 示 。 


GL verts: 258 
GL calls: 2 
60.0 / 0.000 





图 4-3 主角 飞机 的 动画 运行 





点 击 “ 文 件 ” 一 “新 建 项 目 ”， 创建 一 个 名 为 “BigEnemy” 的 工程 ,保存 在 “planeGame” 目 录 下 ,与 “Hero” 工 程 在 同 级 目录 。 











采用 相同 的 操作 ， 制作 一 个 由 “BigEnemy1.png” 与 “BigEnemy2.png” 构 成 的 帧 动画 “BigEnemyldle”。 

















再 创建 一 个 工程 ， 用 相同 的 方法 制作 一 个 “SmallEnemy” 的 动画 。 





将 导出 资源 复制 后 ， 更 改 init 函 数 。 在 函数 未 尾 ， 创 建 “Hero” 的 后 面 加 入 如 代码 清单 4-2 所 示 的 代码 。 


代码 清单 4-2 ”创建 敌人 飞机 





ArmatureDataManager: :getInstance () ->addArmatureFileInfo ("BigEnemy/BigEnemy.ExportJson") 7 

Armature *bigEnemy = Armature: :create ("BigEnemy") ; 

bigEnemy->getAnimation () —>play ("BigEnemyIdle") ; 

bigEnemy->setPosition (Point (visibleSize.width/3, visibleSize.height/5*4) ); 

addChild (bigEnemy) ; 

ArmatureDataManager: :getInstance () ->addArmatureFileInfo ( 
"Smal1lEnemy/SmallEnemy.ExportJson") ; 

Armature *smallEnemy = Armature: :create ("SmallEnemy") ; 

smal1Enemy->getAnimation () ->play("SmallEnemyIdle") ; 

smallEnemy->setPosition (Point (visibleSize.width/3*2, visibleSize.height/5*4) ); 

addChild (smallEnemy) ; 





于 ， 就 能 够 看 见 三 种 飞机 了 。 





程序 运行 界面 看 上 去 有 些 奇怪 : 飞机 游戏 应 该 是 竖 























的 。 这 里 我 们 要 加 以 更 改 。 




















的 ， 默认 的 模拟 器 却 是 横 











打开 “AppDeleget.cpp”， 找到 “applicationDidFinishLaunching” 函 数 ， 将 其 更 改 为 如 代码 清单 4-3 所 示 的 代码 。 


代码 清单 4-3 


设 定 匹配 模式 





bool AppDelegate: :applicationDidFinishLaunching() { 


// initialize director 

auto director = Director::getInstance () 7 

auto glview = director->getOpenGLView () ; 

if(!glview) { 
//glview = GLView::create ("My Game"); 
glview = GLView: :createWithRect ("Plane", Rect (0,0, 640/5*4, 960/5*4)); 
director->setOpenGLView (glview) ; 


} 

// turn on display FPS 

director->setDisplayStats (true) ; 

// set FPS. the default value is 1.0/60 if you don't call this 
director->setAnimationInterval (1.0 / 60); 


glview->setDesignResolutionSize (640, 960, ResolutionPolicy: :FIXED WIDTH) ; 


// create a scene. it's an autorelease object 
auto scene = HelloWorld: :createScene () ; 

// run 

director->runWithScene (scene) ; 

return true; 





默认 的 模拟 器 分 辨 率 是 960*640。 由 了 
参数 是 设计 


提示 “在 Mac 平 台 上 使 用 IOS 模 拟 器 时 ， 调 整 窗口 应 使 必 


ito 























我 们 的 游戏 是 竖 屏 的 ， 








此 ， 此 处 需要 手动 设 


窗 





的 尺寸 。 当 高 度 为 960 时 ， 窗 















































尺寸 ,最 后 一 个 参数 是 适 配 策略 ， 这 里 我 们 采 








编译 运行 ， 即 可 看 到 三 架 飞 机 了 。 


4.2 ”飞机 移动 


三 架 静 止 的 飞机 已 经 完成 了 ， 这 一 节 我 们 让 它们 动 起 来 。 移 动 包括 两 部 分 : 一 是 点 击 


“FIXED_WIDTH”， 其 他 的 适 配 策 












































4.2.1 


点 击 调度 结构 


会 超出 
咯 可 以 通过 查看 定义 的 方式 找到 注释 。 


幕 拖 动 ， 主 角 飞 机 会 相应 地 移动 ;另外 是 敌人 飞机 的 移动 。 有 两 种 移动 模式 ， 一 种 是 停 在 








屏幕 ， 所 以 我 们 将 其 缩小 到 4/5。 另 外 ， 我 们 设 定 了 匹配 模式 : 前 两 个 


以 下 方法 : 对 于 Xcode5， 打 开 项 目 配置 ， 依 次 点 击 “General” 一 “Deployment Info” 一 “Device Orientation” ， 选 择 “Portrait” 取 消 对 它 的 勾 











幕 上 ， 一 种 是 纵向 穿 








在 Cocos2D-X 3.0 中 ， 新 加 入 了 一 种 点 击 调度 逻辑 。 在 Director 中 有 一 个 类 型 为 EventDispatcher 的 变量 ， 它 可 以 将 事件 分 发 给 注册 进来 的 EventListener。 简 单 地 说 ，EventDispatcher 就 是 个 微 博 的 大 
V,， 而 EventListener 就 是 它 的 粉丝 。 当 大 V 发 一 条 微 博 时 ， 粉 丝 们 都 会 收 到 这 条 消息 。 


一 般 说 来 ， 我 们 要 在 EventListener 中 增加 某 个 事件 的 响应 。 以 主角 的 移动 为 例 ， 我 们 要 创建 一 个 EventListener,， 











让 该 事件 “关注 ”分 发 消息 的 “EventDispatcher”。 





4.2.2 


主角 的 移动 





明 











Í 








代码 清单 4-4 点击 响应 的 处 理 


auto listener = EventListenerTouchOneByOne: :create () 7 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 


{ 
}; 
{ 


return true; 


listener->onTouchMoved = [=] (Touch *pTouch, Event *pEvent) 


auto newPos = plane->getPosition() +pTouch->getDelta () ; 

Size planeSize = plane->getContentSize(); 

if (newPos.x > visibleSize.width - planeSize.width/2) { 
newPos.x = visibleSize.width - planeSize.width/2; 


else if (newPos.x < planeSize.width/2) 
{ 


newPos.x =planeSize.width/2; 


i 

if (newPos.y > visibleSize.height - planeSize.height/2) { 
newPos.y = visibleSize.height - planeSize.height/2; 

} 

else if (newPos.y < planeSize.height/2) 

{ 
newPos.y =planeSize.height/2; 


plane->set Position (newPos) ; 


} 


Director: :getInstance ()->getEventDispatcher () -> 


addEventListenerWithSceneGraphPriority (listener, this); 


> 


Bl 











基本 原理 ， 我 们 看 看 如 何 实现 飞机 移动 。 打 开 “HelloWorldscene.cpp” 找 到 init 函 数 ， 在 其 中 增加 代码 清单 4-4 的 代码 。 





的 类 型 是 点 击 事件 。 创 建 好 该 事件 后 ， 向 点 击 开始 和 点 击 移动 加 入 我 们 的 处 理 ， 最 后 








fag 








点 响应 的 





分 析 一 下 这 段 代 码 。 首 先 创建 了 一 个 件 监听 ， 然 后 向 它 的 成 员 变 量 











的 新 特性 ，9.2 节 中 会 有 关于 它 的 介绍 。 


这 里 我 们 更 改 “onTouchBegan” 的 返回 


接 下 来 在 “onTouchMove” 中 更 改 主角 飞机 的 位 
需要 进行 位 置 判断 。 当 前 的 锚 点 在 飞机 的 正中 心 ， 我 们 通过 “getContentSize” 可 以 取 到 元 素 的 大 小 。 最 后 将 飞机 位 





“onTouchBegan” 5 “onTouchMove” 赋值 。 


























值 为 true， 这 意味 着 接管 此 次 点 击 ; 若 返 回 值 为 false， 则 忽略 此 次 点 击 。 


。 pTouch 中 的 函数 getDelta 可 以 记录 两 次 移动 之 间 的 偏差 值 。 我 们 取 飞 机 当前 的 点 加 上 这 个 偏差 值 ， 就 是 新 位 置 了 。 由 于 飞机 不 能 飞 出 





“onTouchBegan” 的 类 型 是 std::function， 这 种 类 型 是 C++11 








屏幕 ， 我 们 























最 后 不 要 忘记 注册 这 个 EventListener。 只 有 注册 过 ， 才 会 接收 到 回调 。 


编译 运行 ， 我 们 就 能 通过 滑动 





lf 幕 来 改变 飞机 的 位 置 了 。 











设置 到 计 


4 





u 


HRA RAL. 


4.2.3 敌人 飞机 的 移动 




















敌人 飞机 的 移动 所 应 用 的 就 是 第 3 章 提 到 的 知识 : 动作 。 这 里 敌人 飞机 有 两 种 行为 ， 一 种 是 小 飞机 从 屏幕 上 方 飞 到 屏幕 下 方 ; 一 种 是 大 飞机 消 留 在 屏幕 上 方 。 我 们 写 两 个 函数 分 别 实 现 这 个 功能 。 

















在 “HelloWorldscene.h” 中 添加 如 代码 清单 4-5 的 两 个 函数 声明 。 





代码 清单 4-5 ”在 HelloWorld 中 声明 





void createBigEnemy () ; 
void createSmallEnemy () ; 


在 “HelloWorldScene.cpp” 中 实现 如 代码 清单 4-6 所 示 的 代码 。 


代码 清单 4-6 ”实现 创建 敌人 





void HelloWorld: :createSmallEnemy () 
{ 
Size visibleSize = Director: :getInstance()-—>getVisibleSize(); 
Armature *smallEnemy = Armature: :create ("SmallEnemy") ; 
Size planeSize = smallEnemy->getContentSize (); 
int planeX = rand()%(int) (visibleSize.width-planeSize.width) + planeSize.width/2; 
Point startPos = Point (planeX, visibleSize.height+planeSize.height/2) ; 
Point endPos = Point (planeX, -planeSize.height/2) ; 
smallEnemy->getAnimation () ->play ("SmallEnemyIdle") ; 
smallEnemy->setPosition (startPos) ; 
addChild(smallEnemy) ; 
auto moveAct = MoveTo::create (2.5, endPos); 
auto acts = Sequence: :create (moveAct, 
CallFunc: :create ( 
(=) 0 
smallEnemy->removeFromParent () ; 
} 
) NULL) ; 
smallEnemy->runAction (acts) ; 


} 
void HelloWorld: :createBigEnemy () 
{ 
Size visibleSize = Director: :getInstance ()->getVisibleSize(); 
Armature *bigEnemy = Armature: :create("BigEnemy") ; 
Size planeSize = bigEnemy->getContentSize (); 
int planeX = rand()%(int) (visibleSize.width-planeSize.width) + planeSize.width/2; 
Point startPos = Point (planeX, visibleSize.height+planeSize.height/2) ; 
Point endPos = Point (planeX, visibleSize.height/5*4) ; 
bigEnemy->getAnimation () ->play ("BigEnemyIdle") ; 
bigEnemy->setPosition (startPos) ; 
addChild (bigEnemy) ; 
auto moveAct = MoveTo::create(1, endPos) ; 
auto acts = Sequence: :create (moveAct, 
CallFunc: :create ( 





//create bullet 
} 
) ,NULL) ; 
bigEnemy->runAction (acts) ; 























其 中 有 一 个 新 用 法 ， 那 就 是 使 用 CallFunc 类 ， 在 动作 序列 中 ， 创 建 一 个 Lambda 函 数 回调 。 关 于 Lambda 逊 数 ， 在 9.2 节 中 也 会 有 详细 说 明 。 简 单 地 说 ， 这 里 是 把 一 个 遂 数 当成 一 个 动作 来 执行 。 当 创建 
一 个 小 飞机 时 ， 要 在 它 飞 到 屏幕 下 边 时 ， 将 它 移出 游戏 。 创 建 一 个 大 飞机 时 ， 如 果 它 移动 到 悬 停 点 ， 将 执行 开炮 的 逻辑 。 






































最 后 我 们 还 要 更 改 init 函 数 ， 将 其 中 原 有 的 创建 敌人 删 掉 ， 这 样 init 函 数 应 该 如 代码 清单 4-7 所 示 。 





代码 清单 4-7 ”初始 化 函数 





bool HelloWorld::init() 


{ 
71711717171111111111111111111111 
// 1. super init first 
if ( !Layer::init() ) 
{ 
return false; 
} 
Size visibleSize = Director::getIinstance()->getVisibleSize(); 
srand ( (unsigned) time (NULL) ) 7 
ArmatureDataManager: :get Instance () ->addArmatureFileInfo ("Hero/Hero.ExportJson") ; 
Armature *plane = Armature: :create ("Hero"); 
plane->getAnimation () ->play ("HeroIdle") ; 
plane->setPosition (Point (visibleSize.width/2, visibleSize.height/2) ); 
addChild (plane) ; 
ArmatureDataManager: : get Instance () ->addArmatureFileInfo ("BigEnemy/BigEnemy.ExportJson") ; 
ArmatureDataManager: :get Instance () ->addArmatureFileInfo ( 
"SmallEnemy/SmallEnemy.ExportJson") ; 
createBigEnemy () ; 
createSmallEnemy () ; 
auto listener = EventListenerTouchOneByOne: :create () 7 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 
{ 
return true; 
hi 
listener->onTouchMoved = [=] (Touch *pTouch, Event *pEvent) 
{ 
auto newPos = plane->getPosition () +pTouch->getDelta () ; 
Size planeSize = plane->getContentSize(); 
if (newPos.x > visibleSize.width - planeSize.width/2) { 
newPos.x = visibleSize.width - planeSize.width/2; 
} 
else if (newPos.x < planeSize.width/2) 
{ 
newPos.x =planeSize.width/2; 
} 
if (newPos.y > visibleSize.height - planeSize.height/2) { 
newPos.y = visibleSize.height - planeSize.height/2; 
} 
else if(newPos.y < planeSize.height/2) 
{ 
newPos.y =planeSize.height/2; 
} 
Plane->setPosition (newPos) ; 
ti 
Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (listener, this); 
return true; 


编译 运行 ， 可 看 见 随机 位 置 的 两 个 敌 机 出 现 。 


4.3 发 射 子 单 


我 们 现在 能 控制 飞机 了 ， 还 需要 发 射 子弹 才能 战斗 。 子 弹 是 周期 性 发 射 的 ， 我 们 能 用 动作 实现 这 种 效果 吗 ? 细 想 一 下 发 现 有 些 复杂 。 因 为 先前 的 动作 都 是 一 步 连 着 一 步 顺 序 执行 的 ， 而 在 子弹 未 到 达 屏 
幕 边界 时 ， 还 会 发 出 下 一 发 子弹 。 这 就 和 先前 的 用 法 不 太一 样 ， 似 乎 需要 一 个 定时 循环 的 动作 。 在 这 一 节 中 ， 我 们 将 介绍 一 种 方法 ， 专 门 处 理 这 种 延 时 发 生 的 事件 。 完 成 后 的 效果 如 图 4-4 所 示 。 


ae Plane 
































图 4-4 发 射 子弹 


4.3.1 发 出 子弹 


在 Cocos2D-X 中 有 一 种 schedule 机 制 ， 它 可 以 在 一 定 的 周期 触发 一 次 函数 调用 。 在 使 用 它 时 ， 要 指定 触发 的 周期 和 触发 时 回调 的 函数 。 以 发 出 子弹 为 例 ， 我 们 看 一 下 如 何 创 建 一 个 schedule。 








我 们 首先 制作 主角 的 飞机 子弹 。 要 实现 主角 一 创建 就 能 开火 ， 我 们 就 将 代码 加 在 创建 主角 的 位 置 。 我 们 找到 init 冰 数 ， 把 创建 主角 的 部 分 移 掉 ， 将 其 替换 为 “createHero” 冰 数 调用 。 另 外 ， 主 角 作为 
一 个 全 局 变量 ， 在 头 文件 中 声明 ， 最 后 在 实现 文件 中 添加 一 个 回调 函数 ， 如 代码 清单 4-8 所 示 。 


























代码 清单 4-8 ”创建 主角 的 重 构 函 数 








// 声 明 在 头 文件 中 

void createHero (); 

void HeroFire (float dt); 

cocostudio: :Armature* m hero; 

// 定 义 在 cpp 中 的 全 局 变量 

const int HERO BULLET SPEED = 1000; 

const int ENEMY BULLET SPEED = 500; 

const float HERO FIRE DURATION = 0.3; 

const float ENEMY FIRE DURATION = 0.8; 

// 实 现在 cpp 文 件 中 

void HelloWorld: :createHero () 

{ 
m hero = Armature: :create ("Hero"); 
m_hero->getAnimation ()->play ("HeroIdle") ; 
Size visibleSize = Director: :getInstance ()->getVisibleSize(); 
m_hero->setPosition (Point (visibleSize.width/2, visibleSize.height/2)); 
addChild(m_hero) ; 
this->schedule (schedule_selector (HelloWorld: :HeroFire), HERO FIRE DURATION); 


} 

void HelloWorld: :HeroFire (float dt) 

{ 
auto bullet = Sprite: :create ("HeroBullet.png") ; 
Size visibleSize = Director: :getInstance()-—>getVisibleSize(); 
auto startPos = m_hero->getPosition()+Point (0,m_hero->getContentSize() .height/2) ; 
auto endPos = Point (m_hero->getPositionX(),visibleSize.height + 

bullet—>getContentSize() .height/2) ; 
auto duration = (endPos.y- startPos.y) / HERO_BULLET_SPEED; 
bullet->setPosition (startPos) ; 
addChild (bullet) ; 
auto fire = Sequence: :create (MoveTo::create (duration, endPos), 
CallFunc: :create ( 


bullet->removeFromParent () ; 
} 
) , NULL) ; 
bullet->runAction (fire) ; 








我 们 看 到 ，createHero 函 数 的 最 后 一 行 是 开启 一 个 schedule， 间 隔 为 0.3 秒 ， 回 调 函 数 为 HeroFire。schedule 函 数 的 第 一 个 参数 类 型 是 “SEL_ SCHEDULE”。 我 们 跳 转 到 定义 可 以 发 现 它 是 一 个 函数 指 
针 。 通 过 “schedule_selector” 宏 ， 可 以 把 函数 指针 转换 成 对 应 的 类 型 。 设 置 好 了 回调 函数 ， 我 们 只 需 在 其 中 实现 逻辑 即 可 。 这 部 分 与 先前 小 飞机 的 行为 有 些 相似 。 








回 











注意 ”在 头 文件 中 添加 m_hero 变 量 时 ， 不 要 忘记 检查 是 否 包含 了 对 应 的 头 文件 “cocostudio/CocoStudio.h”。 另 外 ， 在 添加 点 击 处 ， 应 把 对 应 的 变量 名 更 改 为 m_hero。 




















在 随 书 光盘 中 找到 “HeroBullet.png” 和 “EnemyBullet.png”， 将 其 复制 到 “Resource” 目 录 下 。 编 译 运行 ， 可 以 看 到 主角 飞机 在 自己 飞机 头 的 位 置 打出 子弹 。 























既然 主角 能 做 ， 敌 人 也 一 样 。 再 添加 一 个 EnemyFire 函 数 ， 如 代码 清单 4-9 所 示 。 


代码 清单 4-9 敌人 开火 





// 头 文件 中 的 声明 
void EnemyFire (float dt); 
// 实 现 
void HelloWorld: :EnemyFire (float dt) 
{ 
auto bullet = Sprite: :create("EnemyBullet.png") ; 
auto startPos = this->getPosition()-Point (0, this—>getContentSize() .height/2) ; 
auto endPos = Point (this->getPositionx(),- bullet->getContentSize() .height/2) ; 
auto duration = (endPos.y + startPos.y) / ENEMY BULLET SPEED; 
bullet->setPosition (startPos) ; 本 T 
getParent ()->addChild (bullet) ; 
auto fire = Sequence: :create (MoveTo::create (duration, endPos), 
CallFunc: :create ( 
[bullet] () { 
bullet->removeFromParent () ; 
} 
) ,NULL) ; 
bullet->runAction (fire); 














实现 了 敌人 攻击 ， 在 createBigEnemy 的 Lambda 函 数 注释 的 下 方 ， 添 加 对 EnemyFire 函 数 的 调用 ， 如 代码 清单 4-10 所 示 。 











代码 清单 4-10 ”调用 敌人 攻击 





auto acts = Sequence: :create (moveAct, 
CallFunc: : create ( 
[=] t f 
//create bullet 
bigEnemy->schedule( schedule _ selector 
(HelloWorld: :EnemyFire), ENEMY _ FIRE_DURATION) š 





编译 运行 ， 即 可 看 到 敌人 与 自己 的 飞机 发 射 炮弹 。 


4.3.2 ”创建 多 个 敌人 








只 有 两 个 机 实在 是 有 点 少 ， 我 们 要 周期 性 地 生成 敌人 ， 用 schedule 来 做 正 合适 。 


修改 createBigEnemy 和 createSsmallEnemy 函 数 的 声明 如 代码 清单 4-11 所 示 ， 使 其 符合 schedule 的 格式 ， 并 更 改 其 在 init 函 数 中 的 调用 。 


代码 清单 4-11 更改 声明 和 调用 


// 更 改 声明 












































void createBigEnemy (float dt); 
void createSmallEnemy (float dt); 


// 增 加 定义 


const float BIG EMENY CREATE DURATION = 5.0; 
const float SMALL EMENY CREATE DURATION = 1 


// 更 改 init 函 数 中 的 调用 


.5; 


schedule (schedule_selector (HelloWorld: :createBigEnemy) ,BIG EMENY CREATE DURATION) ; 
schedule (schedule_selector (HelloWorld: :createSmallEnemy) , SMALL EMENY CREATE DURATION) ; 





编译 运行 ， 即 可 生成 多 个 敌人 。 





有 了 各 种 飞机 、 子 弹 ， 
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滚动 背景 的 原理 是 : 用 两 张 相 同 的 图 片 做 背景 ， 以 相同 的 速度 向 下 滚动 。 这 张 背景 要 满足 两 个 条 件 : 图 片 都 要 比 屏幕 大 ;上 下 边缘 的 过 渡 
到 了 最 初 的 位 置 ， 此 时 ， 将 两 张 图 的 位 置 恢 复 到 最 初 的 状态 。 实 现 起 来 并 不 难 ， 新 加 入 一 个 创建 函数 initBackground 利 









































代码 清单 4-12 ”创建 并 移动 背景 


平滑 。 当 下 面 的 图 








片 完 全 移出 


幕 时 ， 上 面 的 图 片 刚好 移动 








0 一 个 schedule 回 调 函 数 moveBackground， 如 代码 清单 4-12 所 示 。 





// 头 文件 中 的 声明 


void initBackground () ; 


void moveBackground (float dt); 
cocos2d: :Sprite* m background1; 
cocos2d: :Sprite* m background2; 


// 实 现 


void HelloWorld: :initBackground () 


{ 


m_backgroundl = Sprite: :create ("background.png") ; 
m_background1->setAnchorPoint (Point (0,0)); 

m_background1->setPosition (Point (0,0)); 

/7 缩放 X， 让 背景 在 Xx 方向 上 铺 满 屏幕 

Size bkSize = m background1->getContentSize () 7 

auto xScale = Director: :getInstance () ->getVisibleSize () .width / bkSize.width; 
m_background1->setScalexX (xScale) ; 

addChild(m background1,-1) ; 


// 另 一 张 背景 图 片 


m_background2 = Sprite::create ("background.png") ; 
m_background2->setAnchorPoint (Point (0,0)); 
m_background2->setPosition (Point (0,bkSize.height) ) ; 
m_background2->setScaleX (xScale) ; 

addChild(m_background2,-1) ; 

schedule (schedule_selector (HelloWorld: :moveBackground) ,0.01); 


} 
void HelloWorld: :moveBackground (float dt) 


{ 


auto backgroundY = m_background1->getContentSize() .height; 


if (m_background1-. 


{ 


m_background1- 
m_background2- 


} 


else 


m_background1- 
m_background2- 


>getPositionY() < -backgroundY) 


>setPosition (Point (0,0)); 
>setPosition (Point (0,backgroundY) ) ; 


>setPosition (m_backgroundl->getPosition()-Point (0,2)); 
>set Position (m_background2->getPosition()-Point (0,2)); 











最 后 在 init 函 数 的 未 尾 加 入 moveBacktround 函 数 的 调用 。 编 译 运 行 ， 即 可 有 滚动 的 背景 了 。 





44 添加 物理 系统 


现在 只 有 漫天 飞 的 子弹 ， 














却 不 见 有 人 受伤 。 因 为 我 们 没有 做 子弹 击 中 目标 的 判断 。 这 一 节 中 我 们 要 加 入 物理 系统 ( 即 Physics 系 统 ) ， 有 了 它 就 可 以 真正 消灭 政 人 了 ， 运 行 效 果 如 图 4-5 所 示 。 



























































图 4-5 碰撞 处 理 效果 
在 Cocos2D-X 3.0 以 后 ， 新 加 入 了 一 套 物理 系统 ， 它 在 Chipmunks 和 Box2D 上 层 进行 了 封装 ， 并 将 其 规划 到 最 基本 的 元 素 和 场景 中 。 这 里 我 们 使 用 这 个 物理 系统 来 做 碰撞 检测 。 


我 们 来 看 一 下 它 的 层次 结构 。 首 先 要 定义 World， 用 于 确定 物理 环境 ， 例 如 空战 中 是 零 重力 等 外 部 物理 条 件 。 在 这 个 World 中 ， 有 许多 的 Body， 它 们 代表 着 物理 世界 中 的 单位 ， 所 以 我 们 要 在 绘制 的 元 
素 上 绑 定 一 个 Body。 当 两 个 Body 发 生 碰撞 时 ， 会 触发 碰撞 事件 。 接 下 来 的 事情 就 与 先前 我 们 处 理 点 击 一 样 了 : 定义 一 个 EventListener， 并 实现 某 些 功能 。 下 面 我 们 看 看 具体 的 做 法 。 


注意 物 沈 是 一 个 相对 完整 的 功能 。 在 实际 项 目 中 ， 如 果 对 于 一 些 性 能 要 求 比 较 高 ， 像 碰撞 这 种 比较 单一 的 功能 ， 可 以 酌情 采用 逻辑 实现 的 方式 。 


4.4.1 更 改 World 配 置 


打开 “HelloWorldScene.cpp”， 找到 “createScene” 函 数 ， 对 其 进行 的 更 改 如 代码 清单 4-13 所 示 。 


代码 清单 4-13 ”更 改 World 配 置 


Scene* HelloWorl 


< (PhysicsWorld: : DEBUGDRAW_ALL) ; 
(0,0) )7 





scene->addChild (layer) ; 
// return the scene 
return scene; 














首先 ， 我 们 更 改 创建 的 Scene 类 型 ， 让 其 带 有 物理 系统 。 然 后 调用 setDebugDrawMask 函 数 设置 DEBUGDRAW 的 类 型 。 DEBUGDRAW 是 一 个 绘制 的 标记 ， 用 来 标志 物理 系统 的 作用 状态 。 因 为 物理 系 
统 中 的 Body 与 之 前 我 们 绘制 出 来 的 不 同 ， 它 是 一 个 逻辑 概念 。 为 了 确认 其 行为 的 正确 性 ， 我 们 需要 能 够 直观 地 看 到 物理 系统 中 物体 的 状态 。DEBUGDRAW 人 参数 就 是 标记 绘制 的 类 型 ， 当 设置 
为 “DEBUGDRAW _ALL” 时 ， 所 有 的 物理 元 素 都 会 被 绘制 出 来 。 最 后 我 们 将 重力 设置 为 (0，0) ， 这 是 一 个 向 量 ， 用 来 标定 重力 的 方向 。 









































4.4.2 添加 Body 


设置 好 了 World， 接 下 来 就 是 为 每 一 个 元 素 绑 定 一 个 Body 了 。 由 于 要 判断 碰撞 ， 我 们 需要 一 个 类 型 的 定义 。 比 如 某 个 Body 的 类 型 是 敌人 ， 另 一 个 是 主角 的 子弹 ， 当 它们 碰撞 时 ， 敌 人 就 可 以 被 消灭 。 我 
们 在 “HelloWorldScene.h” 中 增加 一 个 如 代码 清单 4-14 所 示 的 定义 。 








代码 清单 4-14 ”Body 类 型 定义 





enum ContactTag { 
HERO = 0, 
HERO BULLET, 
ENEMY BULLET, 
ENEMY 

hi 





然后 分 别 为 每 一 个 元 素 添加 Body， 共 有 五 处 ， 分 别 是 主角 ， 主 角子 弹 ， 大 敌人 飞机 ， 小 敌人 飞机 ， 敌 人 子弹 。 添 加 方式 基本 一 样 ， 为 主角 添加 Body 需 要 更 改 createHero 函 数 ， 更 改 后 的 函数 如 代码 清 
单 4-15 所 示 。 





代码 清单 4-15 为 主角 添加 Body 





void HelloWorld: :createHero () 
{ 
m_hero = Armature: :Create ("Hero"); 
m_hero->getAnimation () ->play ("HeroIdle") ; 
auto body = PhysicsBody: :createBox (m_hero->getContentSize ()); 
body->setTag (ContactTag: : HERO) ; 
body->setContactTestBitmask (OxFFFFFFFF) ; 
m_hero->setPhysicsBody (body) ; 
Size visibleSize = Director: :getInstance()->getVisibleSize (); 
m_hero->setPosition (Point (visibleSize.width/2, visibleSize.height/2) ); 
addChild(m_hero) ; 
this->schedule (schedule_selector (HelloWorld: :HeroFire) , HERO_FIRE_DURATION) ; 





这 里 我 们 创建 好 一 个 方形 的 gody， 将 它 的 Tag 设 置 为 对 应 的 类 型 ， 然 后 将 这 个 Body 设 置 到 绘制 的 元 素 上 。 








同 理 ， 我 们 也 为 两 种 敌 机 分 别 加 上 Body， 如 代码 清单 4-16 所 示 。 


代码 清单 4-16 ”为 敌 机 增加 Body 





// 添 加 小 飞机 的 Body 
void HelloWorld: :createSmallEnemy (float dt) 
{ 


Point startPos = Point (planeX, visibleSize.height+planeSize.height/2) ; 
Point endPos = Point (planeX, -planeSize.height/2) ; 

auto body = PhysicsBody: :createBox (smallEnemy->getContentSize ()); 
body->setTag (ContactTag: : ENEMY) ; 

body->setContactTestBitmask (OxFFFFFFFF) ; 

smal 1Enemy-—>setPhysicsBody (body) ; 

smallEnemy->getAnimation () ->play ("SmallEnemyIdle") ; 
smallEnemy->setPosition (startPos) ; 

addChild (smallEnemy) ; 


i a 
// 添 加 大 飞机 的 Body 

void HelloWorld: :createBigEnemy (float dt) 
{ 


Point startPos = Point (planeX, visibleSize.height+planeSize.height/2) ; 
Point endPos = Point (planeX, visibleSize.height/5*4) ; 

auto body = PhysicsBody: :createBox (bigEnemy->getContentSize ()); 
body->setTag (ContactTag: : ENEMY) ; 

body->setContactTestBitmask (OxFFFFFFFF) ; 

bigEnemy->set PhysicsBody (body) ; 

bigEnemy->getAnimation () ->play ("BigEnemyIdle") ; 

bigEnemy->setPosition (startPos) ; 

addChild (bigEnemy) ; 











以 同样 的 方式 我 们 也 为 





角 发 射 的 子弹 和 敌 机 发 射 的 子弹 添加 Body， 如 代码 清单 4-17 所 示 。 





代码 清单 4-17 ”为 子弹 添加 Body 





void HelloWorld: :HeroFire (float dt) 
{ 


auto startPos = m_hero->getPosition()+Point (0,m_hero->getContentSize() .height/2) ; 

auto endPos = Point (m_hero->getPositionX(),visibleSize.height + bullet-> 
getContentSize() .height/2) ; 

auto duration = (endPos.y- startPos.y) / HERO BULLET SPEED; 

auto body = PhysicsBody: ;createBox (bullet->getContentSize QO); 

body->setTag (ContactTag: : HERO BULLET) ; 

body->setContactTestBitmask (OxXFFFFFFFF) ; 

bullet->setPhysicsBody (body) ; 

bullet->setPosition (startPos) ; 

addChild (bullet); 


} 
void HelloWorld: :EnemyFire (float dt) 
{ 
auto bullet = Sprite: :create("EnemyBullet.png") ; 
auto startPos = this->getPosition()-Point (0, this->getContentSize() .height/2) ; 
auto endPos = Point (this->getPositionx(),- bullet->getContentSize() .height/2) ; 
auto duration = (endPos.y + startPos.y) / ENEMY BULLET SPEED; 
auto body = PhysicsBody: :createBox (bullet->getContentSize()); 
body->setTag (ContactTag: :ENEMY BULLET) ; 
body->setContactTestBitmask (OxFFFFFFFF) ; 
bullet->setPhysicsBody (body) ; 
bullet—>setPosition (startPos) ; 
getParent () ->addChild (bullet) ; 
auto fire = Sequence: :create (MoveTo::create (duration, endPos), 


[bullet] () { 
bullet->removeFromParent () ; 
} 
) NULL) ; 
bullet->runAction (fire); 


添加 好 所 有 的 Body 后 编译 运行 ， 发 现 飞机 会 被 其 他 飞机 撞 偏 ， 如 图 4-6 所 示 ， 这 又 是 怎 


G Piane 

















图 4-6 


物理 引擎 效果 


4.4.3 ”碰撞 处 理 





在 默认 情况 下 ，Body 之 间 有 碰撞 反馈 ， 














代码 清单 4-18 ”碰撞 处 理 


此 飞机 之 间 会 相互 撞 偏 。 要 改变 这 种 状况 ， 就 要 更 改 碰撞 后 的 处 理 。 在 init 函 数 的 末尾 增加 如 代码 清单 4-18 所 示 的 代码 。 








EventListenerPhysicsContact* hitListener = EventListenerPhysicsContact: :create(); 
hitListener->onContactBegin = [=] (const PhysicsContacté& contact) 


{ 
auto tagA = contact.getShapeA () ->getBody () ->getTag ( 


); 
); 


auto tagB = contact.getShapeB ()->getBody ()->getTag ( 
if(tagA != tagB) 
{ 
//Hero Die 
if ((tagA ContactTag::HERO && tagB != ContactTag::HERO BULLET) || 





(tagB ::HERO && tagA != ContactTag: :HERO_BULLET) ) 
{ 

this->unscheduleAllSelectors () ; 

Director: :getInstance () ->getEventDispatcher () -> 

removeEvent ListenersForType ( 

EventListener: : Type: :TOUCH ONE BY ONE); 
this->removeChild (contact .getShapeA () —>getBody () ->getNode () ) ; 
this->removeChild (contact .getShapeB () ->getBody () ->getNode () ) ; 

} 

//Enemy Die 

if((tagA == 
(tagB == 





ContactTag: :HERO BULLET && tagB!=ContactTag: :HERO) || 
ContactTag: :HERO BULLET && tagA!=ContactTag: :HERO) ) 


if (tagA == HERO BULLET) 
{ 
auto enemy = contact.getShapeB ()->getBody ()->getNode () ; 
enemy->unscheduleAl1Selectors () 7 
this—>removeChild (enemy) ; 
this-—>removeChild (contact .getShapeA () ->getBody () ->getNode () ) ; 
} 
else 
{ 
auto enemy = contact.getShapeA () ->getBody () ->getNode () ; 
enemy->unscheduleAl1Selectors () ; 
this—>removeChild (enemy) ; 
this->removeChild (contact .getShapeB () ->getBody () ->getNode () ) ; 


} 


return false; 

hi 

Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (hitListener, this) ; 





SICATIRAIEBEE, 813—~SEventListenerPhysicsContact2&, Gi#—EventListenerNF2, WEBS CHMonContactBeganiz, EMH, XAD AEA Bodynya 








false 时 ， 认 为 两 个 Body 不 发 生 碰撞 反馈 。 其 参数 “PhysicsContact” 包 含 了 此 次 碰撞 的 信息 。 判 断 的 逻辑 不 难 ， 相 信 大 家 都 能 明白 





编译 运行 就 能 够 消灭 敌 机 了 。 


4.5 ”重新 开始 游戏 





现在 距离 一 个 完整 的 游戏 流程 还 差 一 点 ， 
框 如 图 4-7 所 示 。 


区 Plane 





因为 我 们 并 没有 县 





E 角 一 不 小 心 被 击 中 了 ， 游 戏 就 不 能 继续 了 ， 





新 开始 的 处 理 流程 。 

















在 这 节 中 ， 我 们 加 入 重新 开始 和 退出 ， 使 游戏 完整 。 





。 最 后 将 这 个 EventListener 添 加 到 Dispatcher 中 。 























。 当 该 方法 返回 


新 开始 游戏 的 对 话 





向 长 ， 接 下 来 我 们 怎么 做 ? 


GL verts: 292 
GL calls 7 
60.0 / 0.001 


图 4-7 重新 开始 


4.5.1 制作 对 话 杠 


打开 CocosStudio 的 UI 编 辑 器 ， 在 “planeGame” 的 目录 下 创建 一 个 “GameUl” 的 工程 。 将 “Texture/GUI” 目 录 导 入 到 项 目 资源 中 。 然 后 采用 与 第 2 章 钢 琴 游 戏 中 制作 UI 相 同 的 方法 制作 一 个 对 话 
框 。 有 以 下 几 点 需要 注意 : 


“ 画布 大 小 更 改 为 自 定义 : 640+960。 
: 画布 列表 中 的 项 目 名 更 改 为 : GameOverDlg. 
“ 背景 的 子 节点 包括 两 个 按钮 和 一 个 文本 框 ， 确 保 按钮 要 义 选 “ 


编辑 好 后 ， 保 存 导出 文件 ， 将 其 复制 到 程序 工程 目录 ， 完 成 后 如 图 4-8 所 示 。 





普通 模式 画布 640 + 960 


GameOverDig 


向 长 ， 接 下 来 我 们 怎么 做 ? 


对 条 结构 
Panel_20 S hil’ UES bs iF AX 
Background 
Restart 


ExitGame 


OverLabel 





图 4-8 ”编辑 对 话 框 


4.5.2 RABE 





























E 角 播放 爆炸 动画 的 位 置 ， 在 下 面 加 入 代码 清单 4-19 所 示 代 码 。 











有 了 编辑 好 的 对 话 框 ， 我 们 接 下 来 要 做 的 就 是 在 主角 中 弹 之 后 将 其 载 入 显示 出 来 。 找 到 init 函 数 中 的 hitListener 部 分 ， 更 改 其 中 











代码 清单 4-19 RAWE 





bool HelloWorld::init() 
{ 





((tagA == ContactTag::HERO && tagB != ContactTag: :HERO BULLET) || 
(tagB == ContactTag::HERO && tagA != ContactTag::HERO BULLET) ) 


this->unscheduleAllSelectors () ; 
Director: :getInstance () ->getEventDispatcher () -> 
removeEventListenersForType (EventListener: : Type: :TOUCH ONE BY ONE); 
auto gameOverDlg = GUIReader: :get Instance ()-> Doas 
widgetFromJsonFile ("GameOverDlg/GameOverDlg.json") ; 
addChild(gameOverDlg,1); 
auto restart = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") ->getChildByName ("Restart") ) ; 
auto exit = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") —>getChi ldByName ("ExitGame") ) ; 
restart-—>addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 
exit-—>addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 
this->removeChild (contact .getShapeA () ->getBody () ->getNode () ) ; 
this->removeChild (contact .getShapeB () ->getBody () ->getNode () ) ; 











这 里 我 们 载 入 对 话 框 ， 将 其 中 的 按钮 设置 好 响应 函数 。 不 要 忘记 在 头 文件 中 添加 “ui/CocosGUI.h”， 并 且 在 实现 文件 中 添加 命名 空间 “cocos2d::ui”。 接 下 来 就 是 实现 响应 函数 ， 如 代码 清单 4-20 所 


代码 清单 4-20 ”实现 点 击 回调 





// 声 明 

void touchButton (Ref* object, cocos2d: :ui::TouchEventType type); 
// 实 现 

void HelloWorld: :touchButton (Ref *object,TouchEventType type) 


if (type == TOUCH_EVENT_ENDED) 
{ 
Widget* widget = dynamic_cast<Widget*> (object) ; 
if (widget) 
{ 
auto name = widget->getName () ; 
if (name.compare ("ExitGame") == 0) 
{ 
Director: :getInstance () ->end () ; 
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS) 
exit (0); 
#endif 
i 
else if (name.compare ("Restart") == 0) 
{ 
removeAl11Children () 7 


Director: :get Instance () ->getEventDispatcher () ->removeAllEventListeners () ; 


Director: :getInstance () ->getRunningScene () ->getPhysicsWorld() 
—>removeAl1Bodies () ; 
startGame () ; 





在 回调 函数 时 ， 我 们 先 判断 类 型 是 否 为 点 击 结束 ， 然 后 根据 控件 的 名 称 来 判断 是 什么 按钮 被 点 击 了 。 如 果 运 行 平 台 是 jiOS， 退 出 游戏 需要 加 入 “exit (0) ”。 











除 ， 然 后 移 除 所 有 的 Listener， 再 移 除 所 有 的 Body， 最 后 调用 一 个 开始 游戏 的 函数 。 











4.5.3” 重 构 开始 游戏 


既然 此 处 要 调用 开始 游戏 ， 我 们 就 要 简单 


首先 更 改 init 函 数 ， 调 有 















































代码 清单 4-21 ” 重 构 开始 游戏 





构 一 下 init 函 数 了 。 添 加 一 个 新 函数 startGame， 将 其 作为 开始 游戏 的 调用 。 


startGame 函 数 开始 游戏 。 然 后 将 init 函 数 中 其 他 初始 化 逻辑 部 分 放 入 到 startGame 函 数 中 ， 如 代码 清和 


和 4-21 所 示 。 











新 开始 游戏 ， 我 们 先 将 所 有 的 子 节点 移 





bool HelloWorld::init () 


{ 


A7111111111111111111111111111/ 
// 1. super init first 

if ( !Layer::init() ) 

{ 


return false; 


} 
srand ( (unsigned) time (NULL) ) 7 
ArmatureDataManage: get Instance () ->addArmatureFileInfo ("Hero/Hero.ExportJson") ; 
ArmatureDataManager: : get Instance () ->addArmatureFileInfo ("BigEnemy/ 
BigEnemy.ExportJson") ; 
ArmatureDataManager: :get Instance () -> 
addArmatureFileInfo ("SmallEnemy/SmallEnemy.ExportJson") ; 
ArmatureDataManager: : get Instance () ->addArmatureFileInfo ("Explode/ 
Explode .ExportJson") ; 
if (!startGame () ) 


{ 





return false; 


} 


return true; 


} 

// 定 义 

bool startGame () 7 

// 实 现 

bool HelloWorld: :startGame () 


{ 


Size visibleSize = Director: :getInstance()->getVisibleSize(); 
createHero () ; 
if (!m hero) 


CCLOG ("Create Hero Error!"); 
return false; 


} 
schedule (schedule selector (HelloWorld: :createBigEnemy) , BIG EMENY_ 
CREATE DURATION) ; 
schedule (schedule_selector (HelloWorld: :createSmallEnemy) , SMALL EMENY_ 
CREATE DURATION) ; 
auto listener = EventListenerTouchOneByOne: :create (); 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 
{ 
return true; 
i 
listener->onTouchMoved = [=] (Touch *pTouch, Event *pEvent) 
{ 
auto newPos = m_hero->getPosition () +pTouch->getDelta () ; 
Size planeSize = m_hero->getContentSize(); 
if (newPos.x > visibleSize.width - planeSize.width/2) { 
newPos.x = visibleSize.width - planeSize.width/2; 


else if (newPos.x < planeSize.width/2) 


{ 
newPos.x =planeSize.width/2; 


if (newPos.y > visibleSize.height - planeSize.height/2) { 
newPos.y = visibleSize.height - planeSize.height/2; 


} 
else if(newPos.y < planeSize.height/2) 


{ 
newPos.y =planeSize.height/2; 


m_hero->setPosition (newPos) ; 

hi 

Director: :get Instance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (listener, this); 


initBackground () ; 
EventListenerPhysicsContact* hitListener = EventListenerPhysicsContact: :create (); 
hitListener->onContactBegin = [=] (const PhysicsContacté& contact) 


{ 
auto tagA = contact.getShapeA () ->getBody () ->getTag ( 
auto tagB = contact .getShapeB () —->getBody () ->getTag ( 
if(tagA != tagB) 
{ 





); 
); 


//Hero Die 
if ((tagA == ContactTa HERO && tagB != ContactTag 
(tagB == ContactTag::HERO && tagA != ContactTag:: 





IERO_BULLET) || 


{ 
this->unscheduleAl1Selectors () ; 
Director: :get Instance () ->getEventDispatcher () ->remove 
EventListenersForType ( 
EventListener: : Type: :TOUCH ONE BY ONE); 
//show RestartDlg 
auto gameOverDlg =GUIReader: :getInstance ()->widgetFromJsonFile ( 
"GameOverD1g/GameOverD1g.json") ; 
addChild(gameOverDlg,1); 
auto restart = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") ->getChildByName ("Restart") ) ; 
auto exit = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") ->getChildByName ("ExitGame") ) 7 
restart-—>addTouchEventListener ( 
this, toucheventselector (HelloWorld: :touchButton) ) ; 


exit->addTouchEventListener (this, toucheventselector (HelloW 
orld: :touchButton) ) 7 
this->removeChild (contact .getShapeA () ->getBody () ->getNode () ) ; 
this-—>removeChild (contact .getShapeB () ->getBody () ->getNode () ) ; 
} 
//Enemy Die 
if ((tagA == ContactTag: :HERO BULLET && tagB!=ContactTag::HERO) || 
(tagB == ContactTag::HERO BULLET && tagA!=ContactTag: :HERO) ) 
{ 
if (tagA == HERO BULLET) 
{ 


auto enemy = contact .getShapeB () ->getBody () ->getNode () ; 
enemy->unscheduleAl1Selectors () ; 

this—>removeChild (enemy) ; 

this—>removeChild (contact .getShapeA () ->getBody () ->getNode () ) ; 


else 


auto enemy = contact.getShapeA () ->getBody () ->getNode () ; 
enemy->unscheduleAllSelectors () ; 

this—>removeChild (enemy) ; 

this—>removeChild (contact .getShapeB () ->getBody () ->getNode () ) 7 


} 
return false; 


; 
Director: :getInstance ()->getEventDispatcher () -> 

addEventListenerWithSceneGraphPriority (hitListener, this) ; 
return true; 





编译 运行 ， 一 个 简单 的 空战 游戏 就 完成 了 。 


46 ve 


这 章 我 们 一 步 一 步 开 发 了 空战 游戏 。 首 先 ， 我 们 了 解 了 如 何 制作 帧 动画 ， 以 及 在 程序 中 如 何 播放 帧 动画 。 之 后 学 习 了 如 何 通过 EventListener 事 件 分 发 机 制 来 处 理 点 击 等 事件 。 还 学 习 了 Schedule 机 制 ， 
将 其 应 用 到 周期 性 的 功能 上 。 随 后 使 用 Physics 系 统 来 实现 碰撞 处 理 。 最 后 通过 一 个 对 话 框 来 完善 游戏 流程 。 这 章 知识 很 多 ， 建 议 大 家 多 花 些 时 间 研究 ， 因 为 很 多 知识 后 面 章节 也 会 用 到 。 






































第 5 章 飞机 空战 (F) 


她 的 名 字 叫 源 ， 生 得 一 双 闪 烁 西湖 波光 的 眼睛 ， 有 着 吹拂 绿 柳 白 杨 的 笑容 。 

注意 到 她 ， 却 不 是 因为 容貌 ， 而 是 默契 。 

课堂 上 回答 问题 ， 她 说 的 基本 上 是 我 所 想 的 ， 但 我 的 思路 可 是 很 “ 跑 偏 ”的 。“ 如 果 有 轮回 ， 前 世 我 们 一 定 认识 ”， 当 时 我 就 这 样 想 ， 现 在 我 也 这 么 认为 ， 因 为 这 样 的 人 至 今 还 没 碰 到 第 二 个 。 
不 知 何 时 开始 ， 我 们 就 成 为 了 好 友 。 无 话 不 谈 却 无 需 多 谈 。 

“ 哇 ， 果 断 表 和 白 啊 ”， 文 须 听 到 这 终于 忍 不 住 了 ，“ 这 就 好 比 工资 ， 你 不 要 求 ， 就 永远 不 会 给 你 涨 。 你 是 朋友 队 中 最 靠 前 的 那个 ， 却 不 做 转生 任务 ， 换 到 情人 队 里 去 。” 

你 听 我 说 完 ， 班 花 只 有 一 个 ， 追 求 的 人 却 有 很 多 ， 比 如 ， 你 的 好 兄弟 。 

玉 就 是 一 个 ， 和 我 一 样 ， 坐 在 源 周 围 ， 不 过 他 排 的 是 情人 队 。 最 开始 让 让 掩 掩 ， 后 来 觉得 既然 是 兄弟 ， 就 敬 开 说 。 得 出 的 结论 是 : 一 致 对 外 ， 内 部 公平 竞争 ， 底 线 是 不 可 以 黑 对 方 。 
5 月 13 是 源 的 生日 ， 表 白 就 定 在 那天 。 

不 想 却 发 生 了 些 意外 。 一 个 课 间 ， 我 和 玉 在 校 楼 的 走廊 里 闲 诞 ， 听 到 同学 说 ， 玉 的 书 被 源 扔 出 窗外 了 。 我 和 他 匆匆 往 回 走 ， 边 走边 说 : 这 得 质问 一 下 源 了 。 但 玉 却 这 样 回答 

是 ， 不 过 质问 的 目的 是 找到 惹 她 生气 的 那个 人 。 

我 站 住 了 ， 因 为 我 从 未 往 这 个 方向 想 过 。 看 着 玉 的 背影 ， 忽 然 感觉 自己 根本 什么 都 不 懂 。 

我 打消 了 表白 的 念头 。 但 我 也 无 法 再 保持 当前 的 状态 ， 我 选择 了 相反 的 方向 。 


既然 不 想得到 ， 就 远离 。 质 疑 与 否定 是 关系 破裂 的 捷径 。 我 就 找 来 鸡毛 藉 皮 的 小 事 与 源 争吵 。 这 感觉 就 像 是 在 和 自己 吵架 ， 左 右 互 博 ， 两 败 俱 伤 。 须 鬼 几 日 ， 她 就 赌气 不 再 理 我 。 赌 气 的 女人 都 是 要 哄 
的 ， 这 口气 不 散 去 ， 就 会 变 成 一 堵 墙 ， 横 豆 在 两 人 之 间 。 这 悲伤 的 结果 却 是 我 想 要 的 。 从 那 之 后 ， 源 就 再 没 和 我 说 过 一 句 话 。 


玉 表 白 过 ， 得 到 的 结果 是 装 傻 。 他 笑 着 说 ， 这 总 好 过 收 一 张 好 人 卡 。 
林徽因 说 得 好 : 流年 似 水 ， 太 过 匆匆 ， 一 些 故事 来 不 及 真正 开始 ， 就 被 写成 了 昨天 。 
几 个 月 后 ， 源 转 了 学 ， 去 北京 了 。 从 那 时 起 也 就 失去 了 联系 。 


朝 朝 听 完 的 评价 是 : “果断 去 拍 电视 剧 。” 


5.1 “欢迎 界面 





在 这 一 章 中 我 们 主要 介绍 游戏 的 外 围 编 写 。 一 个 完整 的 游戏 不 止 有 游戏 界面 本 身 ， 还 要 有 欢迎 界面 ， 得 分 界面 ， 排 行 榜 等 附加 UI 支 持 。 








这 一 节 我 们 为 飞机 游戏 制作 一 个 欢迎 界面 。 当 点 击 界面 中 的 “开始 游戏 ”按钮 时 ， 启 动 一 局 新 游戏 ， 效 果 如 图 5-1 所 示 。 





GL verts; 
GL calls: 


60.0 / 0, 





5.1.1 编辑 UI 














这 一 章 我 们 依然 使 
行 以 下 步骤 编辑 一 个 界面 : 




















: 更 改 画布 列表 中 的 名 称 为 Welcome， 设 置 画布 尺寸 为 640+960。 

“ 创建 一 个 “开始 游戏 ”按钮 ， 设 置 正常 显示 纹理 为 NewStartpng， 按 下 显示 纹理 为 NewStart_down.png。 
“更改 按钮 名 称 为 StartGame， 确 保 “ 交 互 ” 选 项 被 匀 选 。 

“ 创建 一 个 “最 高 分 ”按钮 ， 设 置 正常 显 


示 纹 理 为 HighScore.png 和 HighScore_down.png。 


“更改 按钮 名 称 为 HighScore， 确 保 “交互 ”选项 被 匀 选 。 











点 击 保存 后 导出 ， 将 导出 文件 复制 到 程序 工程 中 。 


5.1.2 ”流程 控制 


第 4 章 创 建 的 目录 。 打 开 CocoStudio 的 UI 编辑 器 ， 在 GameUI 项 目的 同 级 目录 下 创建 一 个 名 为 NewGUI 的 项 目 。 将 光盘 中 的 “Chapter 5/NewGUI” 文 件 夹 加 入 到 项 目 资源 中 。 执 

















游戏 的 运行 情况 可 以 通过 状态 来 管理 ， 比 如 从 欢迎 界面 切换 到 游戏 界面 ， 从 游戏 界面 切换 到 战斗 结果 界面 等 。 通 常 需 


统一 管理 这 些 状 态 ， 所 以 要 将 游戏 的 流程 状态 管理 写 在 一 个 函数 中 。 我 们 先 定义 











一 些 状态 的 枚 举 ， 然 后 创建 一 个 函数 ， 在 HelloWorldScnen.h 中 添加 如 代码 清单 5-1 所 示 的 定义 。 


代码 清单 5-1 ”创建 流程 控制 函数 





// 定 义 状 态 类 型 

enum GameState { 
Welcome = 0, 
Game, 
HighScore, 
Result 

i 

class HelloWorld 

{ 


: public cocos2d::Layer 


void gameControl (GameState gameState) ; 
private: 

GameState m_gameState; 
} 





定义 好 后 ， 在 HelloWorldSecne.cpp 文 件 中 实现 它 ， 如 代码 清单 5-2 所 示 。 


代码 清单 5-2 ”实现 流程 控制 函数 





void HelloWorld: :gameControl (GameState gameState) 
{ 
switch (gameState) 
{ 

case GameState: :Welcome: 

{ 
CCLOG ("Welcome") ; 
m_gameState = Welcome; 
initBackground () ; 
auto welcome = GUIReader: :get Instance () ->widgetFromJsonFile ("Welcome/Welcome.json") ; 
this->addChild (welcome); 
auto start = dynamic_cast<Widget*>(welcome->getChildByName ("StartGame") ) ; 
start—>addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ); 
auto highScore = dynamic_cast<Widget*>(welcome->getChildByName ("HighScore") ) ; 
highScore ->addTouchEventListener ( 

this, toucheventselector (HelloWorld: :touchButton) ); 

break; 

} 

case GameState: :Game: 

{ 
CCLOG ("Game") ; 
m_gameState = Game; 
removeAl1Children () ; 
Director: :getInstance () ->getEventDispatcher () ->removeAllEventListeners () ; 
Director: :getInstance () ->getRunningScene () ->getPhysicsWorld () ->removeAl1Bodies () ; 
startGame () 7 
break; 

} 


case GameState: :HighScore: 


CCLOG ("HighScore") ; 
m_gameState = HighScore; 
break; 

} 


case GameState: :Result: 


CCLOG ("Result") ; 
m_gameState = Result; 

















break; 
} 
default: 
break; 
} 
} 
这 个 函数 的 作用 就 是 根据 传 进来 的 参数 来 更 改 游戏 到 对 应 的 状态 。 可 以 看 到 ， 我 们 将 主 界面 中 的 两 个 按钮 绑 定 到 之 前 的 按钮 点 击 响应 上 ， 因 此 需要 对 这 种 按钮 的 点 击 做 扩展 。 因 为 流程 控制 要 集中 到 这 























个 函数 中 ， 所 以 也 需要 更 改 init 函 数 ， 更 改 如 代码 清单 5-3 所 示 。 


代码 清单 5-3 更改 init 与 touchButton 


bool HelloWorld: :init() 


{ 
7171171117111111111111111111111/ 
// 1. super init first 
if ( !Layer::init() ) 
{ 


return false; 


f 

srand ( (unsigned) time (NULL) ) ; 
ArmatureDataManager: :getInstance 
ArmatureDataManager: :getInstance 
ArmatureDataManager: :getInstance 
ArmatureDataManager: :getInstance 
gameControl (Welcome) ; 

return true; 


->addArmatureFileInfo 
->addArmatureFileInfo 
->addArmatureFileInfo 
->addArmatureFileInfo 


"Hero.ExportJson") ; 
"BigEnemy.ExportJson") ; 
"SmallEnemy.ExportJson") ; 
"Explode .ExportJson") ; 


} 
void HelloWorld: :touchButton (Ref *object,TouchEventType type) 





T_ENDED) 


dynamic_cast<Widget*>(o 


> PLATFORM IOS) 


") == 0 || name are ("StartGame") == 0) 


这 样 做 就 可 以 将 游戏 流程 的 控制 都 集中 到 gameControl 这 个 函数 中 了 。 由 于 我 们 将 欢迎 界面 中 的 按钮 取 名 为 StartGame， 因 此 这 里 要 增加 一 个 判断 。 当 所 有 流程 都 完成 时 ， 我 们 可 以 将 第 4 章 遗 留 的 按 
钮 判断 删 掉 。 此 处 为 了 能 够 正常 运行 ， 暂 时 保留 它 的 逻辑 。 


编译 运行 ， 即 可 看 到 欢迎 界面 ， 点 击 开始 游戏 ， 即 可 进入 游戏 。 


5.2 ”游戏 计 分 


任何 一 款 游戏 都 有 些 需要 记录 的 数据 ， 例 如 ， 主 角 击 退 了 多 少 飞机 ， 需 要 记录 数量 ; 主角 也 不 是 一 下 就 被 击毁 ， 需 要 些 血 量 。 这 一 节 我 们 实现 这 两 个 功能 。 在 游戏 中 ， 这 类 记录 着 游戏 当前 状态 信息 的 
UI 被 统称 为 HUD (Head Up Display) ， 就 是 “抬头 ”就 应 该 看 到 的 信息 。 这 种 形式 的 信息 显示 方式 几乎 被 所 有 游戏 采用 ， 完 成 效果 如 图 5-2 所 示 。 











图 5-2 ”游戏 计 分 区 






























































这 次 我 们 要 摆 放 四 个 元 素 : 两 张 图片 、 一 个 进度 条 、 一 个 数字 标签 。 图 片 是 制作 的 艺术 字 ， 进 度 条 用 来 表示 主角 的 血 量 ， 数 字 标 签 用 来 记录 分 数 。 





























打开 在 5.1 节 中 创建 的 NewGUI 项 目 ， 在 “画布 列表 ”中 右 击 ， 选 择 “ 新 建 画 布 ”， 然 后 将 其 重 命名 为 HUD， 分 别 将 元 素 添加 进去 。 有 以 下 几 点 需要 注意 : 


























: 在 左 侧 的 工具 栏 中 点 选 “ 图 片 ”， 将 其 拖 动 到 工作 区 ， 和 更改 它 “ 特 性 ”中 的 “文件 ”为 资源 中 的 life_words.png， 将 其 名 字 更 改 为 lfeLabel。 











+ 按照 创建 lifeLabel 的 方法 再 创建 一 个 ScoreLabel。 








“ 拖 动 “进度 条 ”到 工作 区 ， 将 其 重 命名 为 ifeBar， 更 改 它 的 图 片 资源 为 ifeBarpng。 








“ 拖 动 “数字 标签 ”到 工作 区 ， 将 其 重 命名 为 ScoreNum。 将 标签 图 片 换 成 humber.png， 同 时 更 改 标签 字符 的 宽 和 高 分 别 为 2 和 34。 数 字 标 签 与 先前 我 们 使 用 的 自 定义 字体 有 些 相 似 处 ， 区 别 在 于 它 是 专 
门 用 来 显示 数字 的 元 素 。 数 字 标 签 采用 定 宽 切 图 替换 的 方式 ， 相 对 于 文字 标签 在 运行 时 效率 更 高 。 另 外 要 将 其 锚 点 的 x 更 改 为 0， 这 样 才 会 从 左 向 右 显 示 。 





保存 后 导出 ， 将 导出 文件 复制 到 程序 工程 中 。 












































接 下 来 我 们 将 制作 好 的 UI 界 面 加 载 到 程序 中 。 因 为 在 对 血 量 和 分 值 进行 调整 时 ， 还 要 能 取 到 具体 的 对 象 ， 所 以 我 们 将 血 量 和 分 值 组 件 保存 成 一 个 成 员 变 量 。 先 添加 两 个 类 成 员 变量 ， 然 后 更 改 
startGame 函 数 ， 如 代码 清单 5-4 所 示 。 























代码 清单 5-4 关联 HUD 


// 在 头 文件 中 添加 类 成 员 变 量 

cocos2d: :u. oadingBar* m_lifeBar; 
cocos2d: extAtlas* m_scoreNum; 
// 在 startGame 函 数 末 尾 添加 ~ 

bool HelloWorld: :startGame () 

{ 






auto hud = GUIReader: :getInstance () ->widgetFromJsonFile ("HUD/HUD. json") ; 
Size screen=Director: :getInstance ()->getVisibleSize (); 

auto offset = Point (0,screen.height-hud->getContentSize() .height) ; 
hud->setPosition (offset) ; 

this—>addChild (hud, 1); 

m lifeBar = dynamic _cast<LoadingBar*> (hud->getChildByName ("LifeBar") ) ; 
m_scoreNum = dynamic cast<TextAtlas*> (hud->getChi 1dByName ("ScoreNum") ) ; 
m_scoreNum->setStringValue ("0") ; 

m_lifeBar->setPercent (100) ; 

return true; 

































































由 于 编辑 器 中 的 设计 尺寸 与 实际 显示 尺寸 可 能 不 一 致 ， 因 此 这 里 要 为 HUD 增 加 一 个 视图 原点 的 偏 移 量 。 在 关联 控件 之 后 ， 我 们 将 分 数 设置 为 0， 血 量 值 设置 为 满 。 





当主 角 被 子弹 击 中 时 ， 扣 除 血 量 并 改变 体力 条 。 当 血 量 为 0 时 ， 结 束 游戏 。 























显示 出 信息 后 ， 接 着 添加 逻辑 控制 。 我 们 先 为 主角 加 上 血 量 。 





我 们 添加 一 个 成 员 函 数 damageHero 来 扣除 主角 的 血 量 值 ， 如 代码 清单 5-5 所 示 。 





代码 清单 5-5 ”增加 伤害 主角 函数 


// 声 明 
void damageHero (); 
// 实 现 


void HelloWorld: :damageHero () 
{ 
if (m_gameState == Game) { 
int precent = m_lifeBar->getPercent (); 
precent -=20; 
m_lifeBar->setPercent (precent) ; 
if (precent == 0) { 
gameControl (Result) ; 
} 











这 段 代 码 实现 很 简单 ， 如 果 调 用 了 damageHero 函 数 ， 就 去 掉 血 量 的 20%。 当 百分比 达到 0 时 ， 结 束 游戏 。 结 束 游戏 还 需要 调用 gameControl， 传 入 它 的 参数 为 Result。 我 们 将 先前 startGame 函 数 中 
hitListener 部 分 结束 游戏 的 代码 移动 到 gameControl 中 的 相应 位 置 ， 分 别 更 改 startGame 中 主角 中 弹 的 部 分 和 gameControl 的 Result， 如 代码 清单 5-6 所 示 。 


代码 清单 5-6 更改 结束 流程 





bool HelloWorld: :startGame () 





HERO && tagB != ContactTag::HERO BULLET) || 
ContactTag::HERO && tagA != ContactTag::HERO_ BULLET) ) 


if (contact .getShapeA () ->getBody () ->getNode () != m hero) { 
createExplode (contact .getShapeA () ->getBody () ->getNode () ->getPosition()); 
this->removeChild (contact .getShapeA () ->getBody () ->getNode () ) ; 

} 

else 

{ 
createExplode (contact .getShapeB () ->getBody () ->getNode () ->getPosition()); 
this->removeChild (contact .getShapeB () ->getBody () ->getNode () ) ; 


this->damageHero () ; 


case GameState::Result: 
{ 
CCLOG ("Result"); 
m_gameState = Result; 
this->unscheduleAllSelectors () 7 
Director: :get Instance () ->getEventDispatcher () ->removeEventListenersForType ( 
EventListener: : Type: :TOUCH ONE BY ONE); 
if (m_hero) = 
{ 


} 
//show RestartDlg 
auto gameOverDlg = GUIReader: :getInstance ()->widgetFromJsonFile ( 
"GameOverD1g/GameOverDlg.json") ; 
addChild(gameOverDlg,1); 
auto restart = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") ->getChildByName ("Restart") ) ; 
auto exit = dynamic_cast<Widget*>(gameOverDlg-> 
getChildByName ("Background") ->getChildByName ("ExitGame") ) ; 
restart-—>addTouchEventListener (this, toucheventselector (HelloWorld 
::touchButton) ) ; 
exit->addTouchEventListener (this, toucheventselector (HelloWorld::t 
ouchButton) ) ; 
break; 


m_hero->removeFromParent OF 





编译 运行 ， 我 们 可 以 看 到 ， 主 角 每 受到 一 次 攻击 都 会 减少 血 量 ,遭受 5 次 攻击 后 结束 游戏 。 
5.24 ”添加 得 分 


主角 有 了 血 量 值 ， 我 们 再 为 它 加 入 得 分 机 制 。 创 建 一 个 函数 addScore 并 将 其 实现 ， 然 后 在 hitListener 的 Enemy Die 部 分 加 入 调用 ， 如 代码 清单 5-7 所 示 。 


代码 清单 5-7 ”添加 得 分 逻辑 





// 头 文件 声明 
void addScore () ; 
// 实 现 
void HelloWorld: :addScore () 
{ 
if (m_gameState == Game) { 
auto str = m_scoreNum->getStringValue () 7 
int num = atoi(str.c_str()); 
numt= 15; 
char add_str[256] ={0}; 
sprintf (add_str, "%d", num) ; 
m_scoreNum->setStringValue (add_str) ; 
$ 


} 
//startGame 中 


//Enemy Die 
if((tagA == ContactTag: :HERO BULLET && tagB!=ContactTag::HERO) || 
(tagB == ContactTag::HERO BULLET && tagA!=ContactTag: :HERO) ) 


this->addScore () ; 
if (tagA == HERO BULLET) 





编译 运行 ， 我 们 的 主角 就 可 以 得 到 分 数 了 。 


5.3 ”结果 界面 








当 游 戏 结束 时 ， 我 们 需要 一 个 结算 的 界面 来 显示 结果 。 在 这 一 节 中 我 们 将 制作 一 个 分 数 结算 界面 ， 效 果 如 图 5-3 所 示 。 








1 体力 : 
得 分 : 135 


[| 打破 纪录 


得 分 : 135 


YOUT Name 


保存 名 3 = 


60.0 / 0.001 





5.3.1 编辑 界面 











结果 界面 有 两 种 状态 ， 分 别 是 打破 纪录 与 未 打破 纪录 。 在 未 打破 记录 时 ， 要 有 文字 和 分 数 提示 ; 在 打破 纪录 时 需要 记 下 玩家 的 分 数 和 名 字 。 


= 











运行 UI 编 辑 器 ， 打 开 项 目 NewGUI。 在 画布 列表 中 新 建 一 个 画布 ， 将 其 重 命名 为 Result。 

















然后 按 下 面 的 步骤 进行 编辑 ， 完 成 后 应 如 图 5-4 所 示 。 








画布 列表 
HUD 


Welcome 


TRICE, spay 
得 分 : 123 


Your Name 
对 象 结构 
Panel 42 
ResultBK 

BreakLabel 
UnBreakLabel 
Input 
Start 
List 
ScoreLabel 
ScoreNum 


SaveName 





图 5-4 ”编辑 界面 





“ 背景 框 是 一 个 图 片 元 素 ， 它 使 用 的 图 片 资源 是 ResultBK.png。 这 里 我 们 将 它 重 命名 为 ResultBK。 

















: 用 同样 方法 创建 两 张 图 片 ， 分 别 更 名 为 BreakLabel 与 UnBreakLabel， 它 们 分 别 是 “打破 记录 ”和 “未 打破 记录 ”的 文字 图 片 。 








“ 创建 一 个 输入 框 ， 将 其 名 为 Input。 更 改 默认 Text 为 Your Name， 占 位 文本 为 eer 
“ 创建 一 个 名 为 ScoreLabel 的 图 片 ， 它 是 “得 分 : ”的 文字 图 片 。 在 它 所 在 的 位 置 后 面 创建 一 个 数字 标签 ， 更 名 为 ScoreNum， 并 更 改 它 的 设置 。 如 果 忘记 如 何 做 ， 可 以 参照 5.2 节 制作 的 计 分 标签 。 


“ 创建 三 个 按钮 ， 分 别 是 HighScore，SaveName，Start。 其 中 ， 当 打破 纪录 时 ， 我 们 先 将 HighScore 和 Start 隐 藏 ， 等 到 保存 后 再 显示 出 这 两 个 按钮 。 因 为 分 开 显示 ， 所 以 它们 之 间 有 些 重 登 也 没 问 题 。 


保存 后 导出 ， 将 导出 文件 复制 到 程序 目录 中 。 


5.3.2 ”加 载 显示 














刚刚 制作 的 界面 需要 在 结束 战斗 时 显示 ， 因 此 它 属 于 gameControl 中 的 Result 部 分 。 我 们 将 更 改 这 部 分 如 代码 清单 5-8 所 示 。 











代码 清单 5-8 ”更改 gameControl 


// 在 头 文件 中 添加 声明 

cocos2d: :ui::Widget* m_resultDlg; 

void HelloWorld: :gameControl (GameState gameState) 
{ 


case GameState: :Result: 
{ 

CCLOG ("Result"); 

m gameState = Result; 

this->unscheduleAllSelectors () ; 

Director: :getInstance () ->getEventDispatcher () 

->removeEventListenersForType (EventListener: : Type: :TOUCH ONE BY ONE); 

if (m_hero) 
{ 


m_hero->removeFromParent () ; 


} 

m_resultDlg = GUIReader: :getInstance ()->widgetFromJsonFile ("Result/ Result.json"); 
setResultDlg (true) ; 

addChild(m_resultDlg, 1); 

break; 














我 们 添加 了 一 个 成 员 变 量 ， 





来 存储 载 入 进来 的 结果 框 指针 。 


代码 清单 5-9” 设 定 结果 框 类 型 


添加 一 个 setResultDIg， 用 来 更 改 结果 框 显 示 模 式 是 打破 纪录 还 是 未 破 纪录 ， 暂 时 我 们 认为 都 是 打破 纪录 。 实 现 如 代码 清和 





5-9 所 示 。 





// 声 明 
void setResultDlg (bool isBreakRecord) ; 
cocos2d: :ui::TextField* m_input; 
// 实 现 T 
void HelloWorld: :setResultDlg (bool isBreakRecord) 
{ 
auto start = dynamic_cast<Widget*>(m_resultDlg-> 
getChildByName ("ResultBK") ->getChildByName ("Start") ) 7 
auto save = dynamic _cast<Widget*>(m_resultDlg-> 
getChildByName ("ResultBK") ->getChildByName ("SaveName") ) ; 
auto highScore =dynamic_cast<Widget*>(m_resultDlg-> 
getChildByName ("ResultBK") ->getChildByName ("HighScore") ) ; 
auto breakLabel = m_resultDlg->getChildByName ("ResultBK") ->getChildByName ("BreakLabel") ; 
auto unBreakLabel = m_resultDlg->getChildByName ("ResultBK") -> 
getChildByName ("UnBreakLabel") ; 
auto scoreNum = m_resultDlg->getChildByName ("ResultBK") —>getChildByName ("ScoreNum") ; 
dynamic cast<TextAtlas*>(scoreNum) ->setStringValue (m_scoreNum->getStringValue () ); 
m_input = dynamic_cast<TextField*>(m_resultDlg->getChildByName ("ResultBK") -> 
getChildByName ("Input") ) ; 
f (isBreakRecord) 


{ 
breakLabel->setVisible (true); 
unBreakLabel->setVisible (false); 
highScore->setVisible (false); 
start->setVisible (false); 
save->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 
else 


// from save 

save->setEnabled (false); 

save->setVisible (false); 

m_input->setVisible (false); 

m_input->setEnabled (false) ; 

breakLabel->setVisible (false); 

highScore->setVisible (true); 

start->setVisible (true); 

scoreNum->set Position (scoreNum->getPosition ()+Point (0,-70)); 

start->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 

highScore->addTouchEventListener (this, toucheventselector ( 
HelloWorld: :touchButton) ) ; 





这 里 也 添加 了 一 个 成 员 变 量 来 记录 输入 框 的 指针 ， 以 便 保 存 分 数 时 取 到 输入 框 输入 的 内 容 。 最 后 就 是 要 在 点 击 “ 保 存 名 字 ” 按 钮 时 将 名 字 和 分 数 记录 下 来 。 更 改 点 击 响应 如 代码 清单 5-10 所 示 。 


代码 清单 5-10 ”更 改 点 击 响应 








void HelloWorld: :touchButton (Object *object,TouchEventType type) 
{ 
else if (name.compare ("Start") == 0 || name.compare("StartGame") == 


{ 


0) 


gameControl (Game) ; 
} 
else if (name.compare ("SaveName") == 0) 


{ 


auto name = m input->getStringValue () ; 

auto score = m scoreNum->getStringValue (); 

CCLOG ("input is %s,Score is %s",name.c_str(),score.c_str()); 
//save data and Name 

//after save show other button 

setResultDlg (false); 





编译 运行 ， 即 可 正常 执行 流程 了 。 


5.3.3 ”存储 记录 


























在 游戏 结果 存储 方面 ， 我 们 要 将 最 高 分 与 对 应 的 用 户 名 存储 起 来 。 存 储 方法 同 在 钢琴 游戏 中 介绍 的 方式 ， 使 
息 。 另 外 ， 在 gameControl 函 数 中 的 Result 部 分 判断 最 高 分 ， 如 代码 清单 5-11 所 示 代 码 





代码 清单 5-11 存储 记录 














UserDefault 类 。 在 touchButton 函 数 中 ， 在 刚刚 添加 的 点 击 响应 代码 的 后 





回 











加 入 存储 信 





void HelloWorld: :touchButton (Object *object,TouchEventType type) 
{ 


//save data and Name 

UserDefault: :getInstance () ->setStringForKey ("High Name", name); 

UserDefault: :getInstance () ->set IntegerForKey ("High Score", atoi (score.c_str()))7 
UserDefault: :getInstance ()->flush () 7 


} 
void HelloWorld: :gameControl (GameState gameState) 
{ 


m_resultDlg = GUIReader: :getInstance ()->widgetFromJsonFile ("Result/Result.json"); 
int score = UserDefault: :getInstance ()->getIntegerForKey ("High Score"); 
int currentScore = atoi (m_scoreNum->getStringValue ().c_str()) = 
if (score< currentScore) { 
setResultDlg (true) ; 


} 


else 


{ 
setResultDlg (false); 


} 
} 
addChild(m_resultDlg, 1); 


译 运 行 ， 就 完成 了 简单 的 计 分 系统 ， 它 能 够 记录 最 高 分 和 玩家 名 字 。 


经 过 5.3 节 的 编写 ， 飞 机 空战 游戏 已 经 能 将 最 高 分 记录 下 来 了 。 这 一 节 我 们 制作 一 个 最 高 分 的 查看 界面 。 在 主页 面 和 未 破 纪录 页 面 点 击 “ 最 高 分 ”按钮 ， 可 以 查看 最 高 分 ， 效 果 如 图 5-5 所 示 。 


ig Plane 











5.4.1 ”编辑 界面 





与 5.3 节 中 的 结果 框 相似 ， 我 们 在 画布 列表 中 新 建 一 个 HighScore 界 面 。 控 件 的 命名 如 下 : 























“ 背景 框 使 用 与 结果 框 相同 的 背景 图 片 ， 将 背景 框 命名 为 HighScoreBK。 





“ 创建 一 个 文本 框 ， 将 其 字号 改 为 30， 名 称 改 为 UserName。 


' 得 分 数字 与 5.3 节 的 制作 方法 相同 ， 名 称 改 为 ScoreName。 














编辑 完成 后 保存 导出 ， 将 导出 文件 复制 到 工程 中 。 


5.4.2 ”加 载 实现 


加 载 需 要 更 改 gameControl 的 HighScore 部 分 ， 添 加 加 载 逻 辑 ， 加 入 如 代码 清单 5-12 所 示 的 代码 。 


代码 清 


5-12 ”加 载 最 高 分 


void HelloWorld: :gameControl (GameState gameState) 


{ 


case GameState: :HighScore: 


{ 


CCLOG ("HighScore") ; 

m_gameState = HighScore; 

Director: :getInstance () ->getEventDispatcher () ->removeAllEventListeners () ; 
auto highScore = GUIReader: :get Instance () ->widgetFromJsonFile 
("HighScore/HighScore. json") ; 


auto num = dynamic _cast<TextAtlas*> 


E (highScore->getChildByName 
("HighScoreBK") ->getChildByName ("ScoreNum") ) ; 


auto aa = highScore->getChildByName ("HighScoreBK")->getChildByName ("UserName") ; 
auto name = dynamic_cast<Text*> (aa); 

int scoreNum = UserDefault: :get Instance () ->getIntegerForKey ("High Score") ; 

char scoreStr[256]={0}; T 

sprintf (scoreStr, "%sd",scoreNum) ; 

num->setStringValue (scoreStr) ; 

name->setText (UserDefault: :get Instance () ->getStringForKey ("High _Name", "s_s") Jg 
auto start = dynamic cast<Widget*>(highScore-> 

getChildByName ("HighScoreBK") ->getChildByName ("Start") ) 7 
start->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton)); 
addChild (highScore, 1); 

break; 











在 上 面 的 代码 中 ， 我 们 取出 存储 的 最 高 分 纪录 ， 将 它 的 数值 更 改 到 显示 控件 上 。 





最 后 在 touchButton 函 数 中 增加 点 击 最 高 分 时 的 逻辑 处 理 ， 如 代码 清单 5-13 所 示 。 


代码 清单 5-13 ”调用 流程 





void HelloWorld: :touchButton (Object *object,TouchEventType type) 


{ 


if (type == TOUCH_EVENT_ENDED) 


{ 


Widget* widget = dynamic_cast<Widget*> (object) ; 
if (widget) 


{ 


auto name = widget->getName () 7 

if (name.compare ("ExitGame") == 0) 

{ 
Director: :getInstance ()->end () 7 

#if (CC_TARGET PLATFORM == CC_PLATFORM IOS) 
exit(0); — = i 

#endif 

} 

{ 


} 
else if (name.compare ("SaveName") == 0) 


{ 


gameControl (Game) ; 


auto name = m input->getStringValue (); 

auto score = m scoreNum->getStringValue () $ 

CCLOG ("input is %s,Score is %s",name.c_str(),score.c_str()); 

//save data and Name = 区 

UserDefault: :getInstance () —>setStringForKey ("High Name", name); 

UserDefaul get Instance ()->set IntegerForKey ("High Score", atoi (score.c str())); 
UserDefault: :getInstance ()->flush () ; = ~ 
//after save show other button 

setResultDlg (false); 





else if (name.compare ("HighScore") == 0) 


{ 
} 


gameControl (HighScore) ; 

















编译 运行 ， 最 高 分 就 可 以 正常 使 用 了 。 





至 此 ， 空 战 游戏 所 有 功能 都 开发 完成 。 
































本 章 中 主要 介绍 了 游戏 中 UI 及 对 话 框 的 使 用 ， 首 先 介绍 了 制作 按钮 做 最 基本 的 交互 ， 接 下 来 介绍 制作 HUD 来 显示 信息 ， 最 后 介绍 了 对 话 框 的 使 用 ， 包 括 改变 对 话 框 的 状态 和 读 取 存 储 数据 等 。 熟 练 掌握 
这 些 技巧 ， 就 可 以 制作 出 适合 自己 游戏 的 交互 界面 ， 从 而 更 好 地 提示 和 引导 玩家 。 




















夜 已 深 了 ， 烧 烤 小 店 中 依旧 热 疮 非凡 。 在 酒 神 的 统治 下 ， 人 们 或 真 或 假 地 倾诉 着 自己 的 梦 。 
听 完 劲松 的 故事 ， 大 家 七 嘴 八 舌 地 议论 起 来 。 文 彪 表 示 自 己 有 源 的 联系 方式 。 朝 朝 听 闻 ， 果 断 接 话 道 : “再 续 前 缘 的 节奏 ， 我 看 靠 谱 ， 传 说 中 的 《十 年 》 啊 ! ” 
出 乎 众人 的 意料 ， 劲 松 却说 ， 不 会 再 和 源 联系 。 他 有 自己 的 看 法 : 


正如 歌 中 所 唱 “ 即 使 再 见面 ， 成 熟 的 表演 ， 不 如 不 见 。” 时 间 将 我 们 冲 散 ， 有 缘 无 分 ， 这 是 宿命 。 另 一 方面 ， 现 在 的 我 要 追逐 的 是 真正 的 她 吗 ? 不 是 。 隔 了 十 年 ， 早 已 物 是 人 非 。 我 追逐 的 是 那个 曾经 
的 她 ， 或 者 说 是 曾经 的 岁月 。 这 些 已 成 回忆 ， 何 必 再 来 破坏 ? 刹那 即 永恒 ， 流 水 之 中 如 何 担 住 一 粒 细 沙 ? 我 们 都 已 经 回 不 去 了 。 


“SEAM, REMIT, ” AP WCB La AAT. RAR AYRE EAS 
“看 过 剧 透 的 电影 ， 怎 么 正常 欣赏 呢 ? ”劲松 说 道 ，“ 文 彪 也 说 了 ， 她 现在 有 自己 的 生活 。 在 北京 这 个 高 富 帅 泛滥 的 城市 ， 她 又 何必 拿 青春 去 赌 我 的 明天 。” 


大 家 又 是 一 阵 讨论 ， 最 后 SK 说 : “你 这 论调 是 注定 孤独 一 生 吗 ? 估计 你 的 三 观 也 是 有 问题 ， 这 事 放 我 身上 早 就 向 文 须 要 号 了 。 算 了 ， 和 孔子 不 可 教 也 ， 你 不 想 联系 ， 兄 弟 们 也 没 必要 逼 你 ， 干 了 这 杯 ， 这 
事 就 算 过 去 了 。” 


众人 一 饮 而 尽 。 文 彪 也 叹 道 : “主要 是 如 今 纯粹 的 东西 太 少 了 ， 比 如 前 两 天 我 约 出 来 的 一 个 妹子 ， 上 来 就 问 有 没有 北京 的 房子 ， 尝 死 。” 


SK 说 道 : “游戏 也 是 ， 其 中 总 有 些 乱 起 八 炎 的 元 素 。 原 本 提 好 的 游戏 搞 得 乌 烟 竣 气 的 。 小 时 候 玩 FC 上 的 游戏 多 好 。 现 在 的 游戏 是 绚丽 了 ， 不 过 却 丢 和 失 了 游戏 的 真 。 当 初 我 最 喜欢 玩 打 砖 块 了 ， 简 简单 
单 ， 多 好 。” 


“ 提 需 求 啊 ， 劲 松 能 做 哦 。” 文 刚 笑 着 说 完 ， 和 SK 一 起 望 着 劲松 。 
DRE, H “不 就 是 个 打 砖 块 吗 ? 不 用 提 需 求 ， 明 天 我 就 动手 做 。” 


萌 神 吃 完 最 后 一 串 内 ， 说 : “来 来 ， 最 后 一 杯 酒 ， 共 祝 劲松 教主 千秋 万 代 ， 一 桶 粮 糊 。” 




















在 飞机 空战 游戏 中 ， 我 们 仅 使 用 了 物理 系统 做 碰撞 检测 ， 实 际 上 它 具 有 非常 强大 的 功能 。 这 一 节 我 们 将 看 到 如 何 使 用 它 来 模拟 一 个 真空 环境 ， 制 作 一 个 挡 板 与 弹 球 的 场景 。 完 成 的 效果 如 图 6-1 所 示 。 





图 6-1 挡 板 与 球 


6.1.1 设置 世界 特性 


我 们 创建 一 个 新 代码 项 目 并 起 名 为 breakBlock， 将 光盘 中 “Chapter 6/normal” 下 的 paddle.png 和 ball.png 复 制 到 项 目 Resources 目 录 中 。 更 改 它 的 项 目 配置 
同时 修改 模拟 器 的 相关 数据 ， 使 它 竖 屏 显示 。 具 体 方法 与 4.1 节 相同 ， 此 处 不 再 复述 。 


“世界 ”是 物理 系统 中 的 概念 ， 它 是 物理 系统 的 核心 ， 在 它 的 实例 中 保存 着 大 量 数 据 ， 例 如 重力 的 大 小 、 调 试 绘制 的 状态 等 。 这 里 要 更 改 createScene 函 数 , 设 


代码 清单 6-1 设置 世界 特性 


Scene* HelloWorld: :createScene () 


// ‘scene' is an autorelease object 
auto scene :createWithPhysics (); 
g tDebugDrawMask (PhysicsWorld: : DEBUGDRAW_ALL) ; 
tGravity (Vect (0,0)); 
// 'layer' is an autorelease object 
auto layer = HelloWorld: :create(); 
// add layer as a child to scene 
scene->addChild (layer) ; 
// veturn the scene 
return scene; 


通过 调用 setGravity 可 以 设置 重力 的 方向 和 大 小 。 在 设置 好 基本 特性 后 ， 我 们 再 加 入 一 个 碰撞 反弹 的 边框 ， 当 球 碰 到 它 时 会 反弹 。 
在 物理 世界 中 ， 有 的 物体 是 能 撞 开 的 ， 称 为 动态 物体 ; 与 之 对 应 的 ， 不 会 被 撞 开 的 就 是 静态 物体 。 移 动 的 小 球 就 属于 动态 物体 ， 而 场景 的 边缘 框 就 是 静态 物体 。 
总 结 先前 飞机 游戏 的 经 验 ， 我 们 直接 创建 一 个 名 为 initPhysicWorld 的 函数 ， 在 init 函 数 中 调用 它 。 然 后 如 代码 清单 6-2 所 示 ， 在 场景 中 创建 一 个 边框 。 


提示 “在 第 5 章 重 构 的 过 程 中 ， 我 们 能 够 发 现 一 些 游戏 公有 的 特性 ， 例 如 此 处 的 初始 化 ， 最 终 一 定 会 放 到 一 个 函数 中 被 抽 离 出 来 。 经 常 留心 这 样 的 细节 ， 我 们 会 


， 使 它 支持 CocoStudio 及 GUI 的 扩展 。 


置物 理 世界 特性 ， 如 代码 清单 6-1 所 示 。 


慢 慢 具备 架构 复杂 系统 的 能 力 。 





代码 清单 6-2 创建 场景 边框 


#define PHYSICS MATERIAL BALL WORLD PhysicsMaterial (1,1,0) 
// on "init" you need to initialize your instance 
bool HelloWorld: :init () 


{ 
SALIUT AL TATA TTT 
// 1. super init first 
if ( !Layer::init() ) 
{ 
return false; 
} 
initPhysicsWorld(); 
return true; 


} 
void HelloWorld: :initPhysicsWorld() 
{ 
Size visibleSize = Director: :getInstance ()-—>getVisibleSize(); 
Point origin = Director: :getInstance ()->getVisibleOrigin () ; 
auto edgeSprite = Sprite::create(); 
auto body = PhysicsBody: :createEdgeBox (visibleSize, PHYSICS MATERIAL BALL WORLD, 3); 
edgeSprite->setPosition (Point (visibleSize.width/2,visibleSize.height/2) ); 
edgeSprite->setPhysicsBody (body) ; 
this—>addChild(edgeSprite) ; 









































通过 调用 createEdgeBox 函 数 ， 我 们 可 以 创建 一 个 静态 的 边框 。 其 中 ， 第 二 个 参数 是 这 个 Body 对 应 的 物理 信息 ， 为 了 创建 一 个 完全 碰撞 的 世界 场景 ， 这 里 将 其 密度 设置 为 1， 弹 性 设 为 1， 摩 擦 力 设 为 
0。 在 这 个 世界 中 创建 的 所 有 物体 都 应 该 符合 这 种 材质 。 第 三 个 参数 是 边框 的 厚度 ， 为 了 能 够 看 清 ， 我 们 将 其 设置 为 3。 





编译 运行 ， 我 们 就 能 看 到 在 模拟 器 屏幕 的 边缘 的 红色 边框 。 











6.1.2 [BIAS Bk 


























制作 好 边框 ， 我 们 再 在 其 中 创建 一 个 回 弹 的 小 球 。 添 加 函数 createBall， 并 在 initPhysicsWorld 函 数 的 最 后 调用 它 ， 同 时 为 小 球 定义 一 个 成 员 变 量 ， 如 代码 清单 6-3 所 示 。 
代码 清单 6-3 ”创建 小 球 


// 声 明 
void createBall (cocos2d::Point position); 
// 定 义 变量 
private: 
cocos2d::Sprite* m ball; 
// 调 用 
createBall (Point (100,100) ) 
// 实 现 
void HelloWorld: :createBall (Point position) 
{ 
auto ballBody = PhysicsBody::createCircle(25,PHYSICS MATERIAL BALL WORLD) ; 
ballBody->setVelocity (Point (300,300) ) 7 T E ~ 
ballBody->setVelocityLimit (600) ; 
m ball = Sprite::create("ball.png") ; 
m ball->setPhysicsBody (bal1Body) ; 
m_ball->setPosition (position); 
addChild(m_bal1) ; 






































我 们 可 以 看 到 ， 通 过 createBall 函 数 的 第 一 行 通过 调用 PhysicsBody::CreatCircle 创 建 了 一 个 圆 形 的 Body。 通 过 对 其 速度 进行 设置 ， 使 其 动 起 来 ， 速 度 值 是 一 个 向 量 ， 用 Point 结 构 来 标识 。 然 后 设置 小 
球 的 最 大 运动 速度 ， 防 止 速 度 过 快 出 现 穿 透 的 现象 。 最 后 将 创建 的 Body 设 置 为 球 的 Body。 编 译 运行 ， 就 会 看 到 小 球 可 以 不 断 地 运动 、 碰 撞 了 。 

















6.1.3 ”创建 挡 板 





创建 了 小 球 ， 还 要 创建 一 个 挡 板 来 接 住 它 。 挡 板 是 不 可 以 被 小 球 撞 偏 的 ， 因 此 它 是 应 静态 物体 。 与 创建 小 球 一 样 ， 我 们 来 写 一 个 函数 createPaddle 来 创建 挡 板 ， 如 代码 清单 6-4 所 示 。 
注意 ” 挡 板 虽然 能 够 移动 ， 但 它 的 属性 依然 是 静态 物体 。 


代码 清单 6-4 ”创建 挡 板 





// 声 明 
void createPaddle (cocos2d: :Point position); 
// 调 用 ， 在 createBal1 下 面 添加 
createPaddle (Point (100, 60)); 
// 实 现 
void HelloWorld: :createPaddle (Point position) 
{ 
auto paddle = Sprite: :create ("paddle.png"); 
auto paddleBody = PhysicsBody: :createBox ( 
paddle->getContentSize(),PHYSICS MATERIAL BALL WORLD) ; 
paddleBody->setDynamic (false) ; 7 T 7 
Size visibleSize = Director: :getInstance()—>getVisibleSize(); 
paddle->setPhysicsBody (paddleBody) ; 
paddle->setPosition (position); 
addChild (paddle) ; 

















与 创建 小 球 的 不 同 之 处 是 ， 这 里 调用 setDynamic 函 数 将 挡 板 设置 为 静态 物体 。 


6.1.4 Basix 





静止 的 挡 板 无 法 移动 ， 我 们 要 为 其 添加 点 击 响应 。 在 刚才 的 createPaddle 函 数 的 最 后 添加 如 代码 清单 6-5 所 示 的 代码 ， 为 挡 板 添加 移动 响应 。 


代码 清单 6-5 ”添加 移动 响应 





void HelloWorld: :createPaddle () 
{ 


auto listener = EventListenerTouchOneByOne: :create (); 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 
{ 

return true; 
i 
listener->onTouchMoved = [=] (Touch *pTouch, Event *pEvent) 
{ 

auto offset = pTouch->getDelta(); 

auto newPos =paddle->getPosition ()+offset; 

auto paddleSize = paddle->getContentSize () ; 

if (newPos.x<paddleSize.width/2) { 


newPos.x = paddleSize.width/2; 


} 
} 
else if (newPos.x>visibleSize.width-paddleSize.width/2) 
{ 
{ 

newPos.x = visibleSize.wi 


paddle->getPos 
tPosition (newPos) ; 


::getInstance () ->getEventDispatcher () 
>addEventListenerWithSceneGraphPriority(listener, this); 


编译 运行 ， 就 可 以 拖 动 屏幕 移动 挡 板 了 。 


创建 了 基础 场景 ， 接 下 来 我 们 制作 关卡 。 关 卡 的 编辑 仍然 是 在 UI 编 辑 器 中 进行 ， 主 要 的 编辑 工作 是 添加 目标 砖 块 。 与 第 4 章 不 同 的 是 ， 我 们 会 使 用 场景 编辑 器 创建 项 目 ， 并 对 资源 进行 管理 。 完 成 效果 如 
图 6-2 所 示 。 











图 6-2 关卡 效果 


6.2.1 “使 用 场景 编辑 器 
运行 Cocostudio， 选 择 场景 编辑 器 (Scene Editor) 。 打 开 编辑 器 后 点 击 菜单 中 的 “文件 ”一 “新 建 项 目 ”一 “新 建 游戏 项 目 ”。 在 弹出 的 对 话 框 中 更 改 项 目 名 称 和 保存 路 径 ， 如 图 6-3 所 示 。 











Ess Pia WAU 三 | breakBlockStudio 





游戏 项 目 路 径 C:\Code\ 
游戏 包 名 称 
J No Code 


Cocos2D-X 





图 6-3 创建 新 项 目 
用 两 个 项 目 分 离 的 形式 。 在 第 7 章 的 项 目 中 ， 我 们 将 采取 直接 从 编辑 


注意 ” 当 创 建 场景 项 目 时 ， 取 消 “No Code” 的 勾 选 ， 这 样 可 以 同时 创建 代码 项 目 。 为 了 清楚 地 讲解 资源 与 代码 的 关系 ， 本 章 


器 创建 代码 的 方式 组 织 目录 。 
在 成 功 创建 新 项 目 后 ， 将 光盘 中 “Chapter 6/editor” 目 录 下 的 文件 复制 到 “项 目 目录 /CocoStudioyassets” 目录 下 。 这 个 目录 就 相当 于 我 们 先前 创建 的 “Texture” ， 其 中 存放 了 所 有 的 资源 。 


点 击 菜单 中 的 “文件 ”一 “新 建 项 目 ”一 “新 建 UI 项 目 ”， 在 弹出 的 对 话 框 中 ， 更 改 项 目 名 为 “tasks”。 我 们 会 发 现 保存 目录 不 能 更 改 ， 它 是 由 CocoStudio 自 行 创建 并 进行 管理 的 。 


自 创 建 完 新 项 目 后 ， 在 场景 编辑 器 的 左 侧 “资源 ”选项 卡 中 找到 我 们 新 建 的 项 目 。 双 击 工程 文件 “tasks.xml.ui” 打 开 项 目 ， 能 够 看 到 刚刚 复制 到 “assets” 中 的 资源 已 经 被 导入 。 








接 下 来 ， 进 行 关卡 的 编辑 ， 对 其 做 如 下 配置 : 

“更改 画布 尺寸 为 640*960。 

“更改 画 布 名 为 “task1”。 

“ 在 工作 区 中 添加 一 个 层 容器 ， 将 其 改名 为 “Blocks”， 更 改 其 尺寸 为 640*960。 在 其 “特性 ”一 “填充 颜色 ”处 选择 “无 颜色 ”。 
“ 在 Blocks 中 创建 多 个 目标 砖 块 ， 并 摆 放 到 合理 的 位 置 。 


这 样 就 完成 了 编辑 。 保 存 后 导出 ， 导 出 的 文件 会 自动 保存 到 “assets/publish” 目 录 下 。 


























接 下 来 ， 我 们 再 创建 一 个 场景 ， 也 可 以 直接 将 场景 载 入 到 游戏 中 。 点 击 “文件 ”一 “新 建 ”一 “新 建 场景 项 目 ”， 在 弹出 的 对 话 框 中 更 改 项 目 名 称 为 “taskScene1”， 并 对 它 做 以 下 设置 。 


:更改 画布 大 小 为 640*960。 


“ 在 对 象 结构 中 选中 根 节点 。 在 右 侧 的 “属性 标签 ”一 “常规 ”一 “名 字 ” 中 ， 将 其 更 改 为 “toot”。 








接 下 来 创建 一 个 UI 控 件 。 选 择 左 侧 工具 栏 中 的 UI 按 钮 ， 将 其 拖 动 到 场景 中 。 








成 功 添加 控件 后 ， 找 到 publish 目 录 下 的 导出 文件 task1json， 将 其 拖 动 到 刚才 添加 控件 的 “UI” 选 项 卡 中 “常规 ”一 “文件 ”处 ， 并 更 改 “ 名 字 ” 为 “taskComponent” ， 最 后 将 控件 的 位 置 更 改 为 





(0, 0) ， 如 图 6-4 所 示 。 
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图 6-4 界面 编辑 





接 下 来 导出 场景 项 目 。 选 择 “文件 ”一 “导出 项 目 ” 一 “导出 资源 ”， 导 出 后 的 文件 存放 在 “ 根 目录 /Resources/publish” 下 。 


6.2.2 ”加 载 场景 








打开 代码 项 目 ， 添 加 一 个 成 员 函 数 loadTaskScene， 在 initPhysicsWorld 函 数 的 末尾 调用 它 ， 如 代码 清单 6-6 所 示 。 
注意 ”此 处 要 将 editor-support 的 目录 添加 到 项 目的 包含 目录 中 ， 并 引入 libGUI 库 和 libExtension 库 。 


代码 清单 6-6 ”加 载 场景 





// 声 明 

#include "cocostudio/CocoStudio.h" 
void loadTaskScene (); 

// 调 用 

void HelloWorld: :initPhysicsWorld() 
{ 


CreateBall (Point (100,100) ) ; 
createPaddle (Point (100, 60) ) ; 
loadTaskScene () ; 


} 

// 实 现 

void HelloWorld: : loadTaskScene () 

{ 
auto task = cocostudio: :SceneReader: :getInstance () 

->createNodeWithSceneFile ("publish/taskScenel.json") ; 

addChild (task); 

} 





通过 调用 createNodeWithSceneFile 函 数 ， 我 们 可 以 方便 地 将 编辑 器 生成 的 场景 文件 加 载 到 程序 中 。 

















由 于 存在 适 配 的 问题 ， 这 里 我 们 需要 调整 插入 taskScene 的 位 置 。 增 加 一 个 成 员 变量 ， 用 来 记录 编辑 器 原点 适 配 之 后 的 偏 移 量 ， 如 代码 清单 6-7 所 示 。 


代码 清单 6-7 适 配 场景 





// 声 明 

cocos2d: :Point m_screenOffset; 
// 在 初始 化 中 添加 

bool HelloWorld::init() 

{ 


auto visiableSize = Director: :getInstance()-—>getVisibleSize(); 
auto taskSize =Size (640,960); 

auto offsetX = (visiableSize.width - taskSize.width) /2; 

auto offsetY = (visiableSize.height - taskSize.height) /2; 
m_screenOffset= Point (offsetX, offsetyY) ; 


} 
// 更 改 加 载 场景 
void HelloWorld: : loadTaskScene () 
{ 
auto task = cocostudio: :SceneReader: : get Instance () -> 
createNodeWithSceneFile ("publish/taskScenel.json") ; 
auto realTask = static_cast<cocostudio: :ComRender*> (task->getChildByTag (10003) -> 
getComponent ("taskComponent") ) ->getNode () ; 
realTask->setPosition (m_screenOffset) ; 
addChild(task); ` 











要 在 loadTaskScene 中 设置 UI 元 素 的 偏 移 ， 首 先 要 根据 Tag 找 到 对 应 的 节点 ， 然 后 再 取 其 上 组 件 (Component) ， 最 后 使 用 组 件 的 getNode 方 法 取 到 真正 的 目标 节点 。 其 中 10003 是 编辑 器 中 对 应 的 
Tag， 大 家 可 根据 自己 项 目 中 的 参数 填写 。 





我 们 只 能 通过 Tag 取 到 在 场景 编辑 器 中 添加 的 节点 。 节 点 的 上 面 只 有 位 置 等 基本 信息 ， 换 句 话说 ， 节 点 上 面 只 有 在 场景 编辑 器 中 添加 的 信息 。 对 于 具体 菜 个 元 素 的 信息 ， 比 如 UI 组 件 中 的 具体 信 





息 ， 需 要 得 到 对 应 的 Component 后 才能 取 到 。 这 一 点 我 们 将 在 6.3 节 中 讲 到 。 


编译 运行 ， 即 可 看 到 我 们 编辑 的 场景 加 载 到 了 程序 中 。 














到 这 里 ， 程 序 能 够 运行 起 来 ， 但 球 还 是 撞 不 到 目标 块 ， 因 为 我 们 还 没有 对 目标 块 做 碰撞 处 理 。 这 一 节 我 们 来 完善 碰撞 系统 。 完 成 后 效果 如 图 6-5 所 示 。 

















图 6-5 消去 砖 块 





像 《机 空战 游戏 一 样 ， 我 们 要 定义 Body 的 几 种 类 型 。 在 头 文件 中 加 入 如 代码 清单 6-8 所 示 的 定义 ， 并 为 小 球 和 挡 板 设置 对 应 的 类 型 。 


代码 清单 -8 定义 Body 





enum BodyType { 
Paddle, 
Ball, 
Target, 
DieLine 


l; 

// 定 义 挡 板 类 型 

void HelloWorld: :createPaddle () 

{ 
auto paddle = Sprite: :create("paddle.png") ; 
auto paddleBody = PhysicsBody: :createBox ( 

paddle->getContentSize(),PHYSICS_MATERIAL BALL WORLD) ; 

paddleBody->setDynamic (false) ; 
paddleBody->setContactTestBitmask (OxFFFFFFFF) ; 
paddleBody->setTag (Paddle) ; 
Size visibleSize = Director: :getInstance()->getVisibleSize(); 


} 
// 定 义 弹 球 类 型 
void HelloWorld: :createBall (Point position) 
{ 
auto ballBody = PhysicsBody: :createCircle (25, PHYSICS MATERIAL BALL WORLD) ; 
ballBody->setVelocity (Point (300,300) ) ; ~ ~ ~ 
ballBody->setVelocityLimit (600) ; 
ballBody->setContactTestBitmask (OxFFFFFFFF) ; 
ballBody->setTag (Ball); 
m ball = Sprite::create("ball.png") ; 
m_ball->setPhysicsBody (bal1Body) ; 
m_ball->setPosition (position); 
addChild(m_bal1) ; 





























从 编辑 器 中 生成 的 文件 并 没有 绑 定 物理 模型 ， 因 此 我 们 添加 一 个 成 员 函 数 addPhysicRect， 用 来 为 





代码 清单 6-9 ” 绑 定 编辑 模型 





标 砖 块 添加 Body， 如 代码 清单 6-9 所 示 。 





// 声 明 
void addPhysicRect (cocos2d: :Node* parent); 
// 调 用 
void HelloWorld: : loadTaskScene () 
{ 
auto task = cocostudio: :SceneReader: :getInstance () -> 
createNodeWithSceneFile ("publish/taskScenel.json") ; 

auto realTask = static_cast<cocostudio: :ComRender*>(task-> 

getChildByTag (10003) ->getComponent ("taskComponent") ) ->getNode () 7 


realTask->setPosition (m_screenOffset) ; 
addPhysicRect (realTask->getChildByTag (2) ); 
addChild (task) ; 


} 
// 实 现 
void HelloWorld: :addPhysicRect (cocos2d: :Node* parent) 
{ 
for (auto child:parent->getChildren ()) 
{ 
auto body = PhysicsBody: :createBox (child->getContentSize(), 
PHYSICS MATERIAL BALL WORLD) ; 
body->setDynamic (false) ; 
body->setTag (Target) ; 
child->setPhysicsBody (body) ; 





ELRAERS?, reaTaskER NEU BPE FA RAR A, MEARE ie ER PeBlocstmath, FSANMAPEMMATage2, AAR EBlocks(eHtReh, MACHT 
节点 ， 为 每 一 个 子 节点 设置 物理 属性 。 
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有 了 类 型 我 人 接 下 来 就 可 以 添加 碰撞 的 响应 。 与 先前 飞机 空战 游戏 中 不 处 理 碰 挤 相反 ， 这 次 onContactBegin 要 返回 true， 表 示 对 碰撞 进行 物理 模拟 。 添 加 一 个 函数 attachHitListener 来 创建 碰撞 响 
应 ， 如 代码 清单 6-10 所 示 。 


代码 清单 6-10 ”添加 碰撞 响应 





// 定 义 
void attachHitListener (); 
// 调 用 
void HelloWorld: : loadTaskScene () 
{ 
auto task = cocostudio: :SceneReader: :getInstance () 
->createNodeWithSceneFile ("publish/taskScenel .json") ; 
auto realTask = static_cast<cocostudio: :ComRender*> ( 
task->getChildByTag (10003) ->getComponent ("taskComponent") ) —>getNode () ; 
realTask->setPosition (m_screenOffset) ; 
addPhysicRect (realTask->getChildByTag (2) ) 7 
attachHitListener () ; 
addChild (task) ; 


} 
// 实 现 
void HelloWorld: :attachHitListener () 
{ 
EventListenerPhysicsContact* hitListener = EventListenerPhysicsContact: :create(); 
hitListener->onContactBegin=[=] (const PhysicsContact& contact) 
{ 
auto tagA = contact .getShapeA () ->getBody () ->getTag ( 
auto tagB = contact .getShapeB () ->getBody () ->getTag ( 
if(tagA == Target || tagB == Target) 
{ 


i 
); 


Node* block = nullptr; 
if (tagA == Target) { 
block = contact.getShapeA () ->getBody () ->getNode () ; 
} 
else 
{ 
block = contact.getShapeB ()->getBody () ->getNode () ; 
} 
block->removeFromParent () ; 
} 
return true; 
ie 
Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (hitListener, this) ; 





编译 运行 ， 即 可 碰撞 消除 在 编辑 器 中 编辑 出 来 的 目标 块 了 。 





这 个 游戏 需要 多 个 关卡 ， 下 面 我 们 就 来 看 看 这 个 功能 的 制作 ， 效 果 如 图 6-6 所 示 。 











图 6-6 ”编辑 关卡 


6.4.1 编辑 欢迎 界面 


+ 添加 一 张 名 为 mameLabel 的 图 片 ， 将 其 “特性 ”一 “文件 ”更 换 为 nameLabel.png。 
“ 在 左 侧 的 工具 栏 中 找到 “翻动 页 面 ”， 将 其 拖 动 到 工作 区 。 
- 更 改 它 的 尺寸 为 320k480， 名 称 为 taskList。 


保存 后 导出 ， 效 果 如 图 6-7 所 示 。 





WA 
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Start 


图 6-7 欢迎 界面 

















打开 UI 编辑 嚣 ， 在 画布 中 分 别 添加 task2 和 task3 两 个 关卡 。 编 辑 关卡 的 方法 与 6.2 节 中 没有 区 别 。 要 注意 Blocks 层 的 Tag 值 要 与 task1 保 持 一 致 。 





编辑 完成 后 再 打开 场景 编辑 器 ， 制 作 taskScene2 和 taskScene3 两 个 场景 ， 注 意 对 应 的 Tag 值 也 要 与 taskScene1 保 持 一 致 。 全 部 编辑 完成 后 保存 并 导出 。 


最 后 将 publish 目 录 复 制 到 代码 项 目的 Resources 目 录 下 。 





更 改 init 函 数 代码 ， 并 为 按钮 设置 关联 点 击 响应 ， 记 得 添加 ui 和 CocosStudio 的 头 文件 和 命名 空间 。 另 外 要 将 initPhysicsWorld 中 对 创建 小 球 、 挡 板 和 场景 调用 





数 中 去 ， 如 代码 清单 6-11 所 示 。 


代码 清单 6-11 载 入 欢迎 界面 


去 掉 ， 将 这 些 调用 








都 移动 到 touchButton 函 





bool HelloWorld: :init () 


{ 
17117111111111111111111111111/ 
/ 1. super init first 
if ( !Layer::init() ) 
{ 


return false; 


auto visiableSize = Director::getInstance ()->getVisibleSize (); 

auto taskSize =Size (640,960); 

auto offsetX = (visiableSize.width - taskSize.width) /2; 

auto offsetY = (visiableSize.height - taskSize.height) /2; 

m_screenOffset= Point (offsetX, offsetyY) ; 

auto welcome = dynamic_cast<Widget*>(cocostudio: :GUIReader: :get Instance () 
->widgetFromJsonFile ("publish/welcome.json") ); 

welcome->setPosition (m_screenOffset) ; 

addChild (welcome) ; 

auto start = dynamic_cast<Widget*>(welcome->getChildByName ("Start") ) 7 

start->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 

return true; 


} 

// 声 明 点 击 响应 

void touchButton (cocos2d: :Ref* ref,cocos2d::ui::TouchEventType type); 
// 实 现 


void HelloWorld: :touchButton (Ref *object,TouchEventType type) 
{ 
if (type == TOUCH EVENT ENDED) { 
auto buttonName = dynamic_cast<Widget*> (object) ->getName () ; 
if (buttonName.compare ("Start") == 0) 
{ 
this—>removeAl11Children () ; 
Director: :get Instance () ->getEventDispatcher () ->removeAllEventListeners () ; 
initPhysicsWorld(); 
createBall (Point (100,100) ); 
createPaddle (Point (100, 60) ) 7 
loadTaskScene () ; 




















上 面 的 代码 通过 调用 widgetFromJsonFile 函 数 读 入 一 个 控件 ， 通 过 调用 addTouch-EventListener 函 数 将 点 击 与 响应 进行 关联 ， 并 








在 响应 函数 中 通过 对 象 的 名 字 来 判断 点 击 的 类 型 。 











编译 运行 ， 可 以 看 到 欢迎 画面 ， 点 击 按钮 能 够 开始 游戏 。 


644 关卡 预览 











游戏 选 关 要 有 预览 显示 ， 我 们 可 以 将 场景 加 载 到 翻动 页 面 中 。 当 点 击 “ 开 始 游戏 ”时 ， 加 载 在 翻动 页 面 中 选择 的 关卡 。 



































我 们 先 添加 一 个 loadPageList 函 数 来 加 载 页 面 信息 ， 然 后 在 init 函 数 中 调用 它 。 另 外 我 们 定义 了 一 个 全 局 常量 TASK_MAX， 用 来 标志 最 多 关卡 数 。 如 代码 清单 6-12 所 示 。 








代码 清单 6-12 “加载 页 面 





// 声 明 

void loadPa jeList (cocos2d::ui::Widget* uiRoot); 
// 定 义 类 成 员 变 量 

cocos2d: :ui::PageView* m_taskPage; 

// 定 义 常量 

const int TASK MAX = 3; 

// 调 用 


bool HelloWorld: :init() 


{ 
AEA MA MNRAS 
/ 1. super init first 
if ( !Layer::init() ) 
{ 


return false; 
f 
auto visiableSize = Director: :getInstance ()->getVisibleSize (); 
auto taskSize =Size (640,960); 
auto offsetX (visiableSize.width - taskSize.width) /2; 
auto offsetY = (visiableSize.height - taskSize.height) /2; 
m_screenOffset= Point (offsetX, offsetY) ; 
auto welcome = dynamic _cast<Widget*>(cocostudio: :GUIReader: :getInstance () 
->widgetFromJsonFile ("publish/welcome.json") ); 
welcome->setPosition(m_screenOffset) ; 
loadPageList (welcome) ne 
addChild (welcome) ; 
auto start = dynamic_cast<Widget*>(welcome->getChildByName ("Start") ); 
start->addTouchEventListener (this, toucheventselector (HelloWorld: : touchButton) ) ; 
return true; 


} 
// 实 现 
void HelloWorld: :loadPageList (Widget *uiRoot) 
{ 
m_taskPage = dynamic_cast<PageView*> (uiRoot->getChildByName ("taskList") ); 
char name[32] = {0}; 
for (int i = 1; i<=TASK MAX; ++i) { 
memset (name, 0, sizeof (name) ) 7 
sprintf (name, "publish/task%d.json",i); 
auto task = dynamic_cast<Widget*>(cocostudio: :GUIReader: :getInstance () 
->widgetFromJsonFile (name) ) ; 
task->setScale (0.5); 
m_taskPage->addWidgetToPage (task, i-1, true) ; 


























在 loadPageList 函 数 中 ， 我 们 先 根据 TASK_MAX 宏 设 定 的 关卡 最 大 数量 来 拼写 出 每 一 个 关卡 的 文件 路 径 。 再 根据 这 个 路 径 ， 把 元 素 分 别 加 载 到 翻动 页 











# 

















编译 运行 后 就 可 以 看 到 翻动 页 中 有 我 们 之 前 编辑 的 三 个 关卡 了 。 


最 后 还 要 取得 翻动 页 面 所 在 的 位 置 ， 这 样 点 击 开始 才能 动态 改变 关卡 ， 因 此 需要 更 改 touchButton 函 数 中 点 击 开始 的 逻辑 。 为 了 配合 逻辑 更 改 ， 在 载 入 场景 中 需要 增加 一 个 参数 来 标定 载 入 哪个 场景 ， 
如 代码 清单 6-13 所 示 。 








代码 清单 6-13 ”添加 加 载 场景 逻辑 





// 添 加 成 员 变 量 
int m taskSceneNum; 
// 更 改 touchButton 函 数 
void HelloWorld: :touchButton (Ref *object,TouchEventType type) 
{ 
if (type == TOUCH EVENT ENDED) { 
auto buttonName = dynamic_cast<Widget*> (object)->getName () ; 
if (buttonName.compare ("Start") == 0) 
{ 
m_taskSceneNum = (int)m_taskPage->getCurPageIndex () +1; 
this->removeAl1Children () ; 
Director: :get Instance () ->getEventDispatcher () ->removeAllEventListeners () ; 
initPhysicsWorld(); 
createBall (Point (100,100) ); 
createPaddle (Point (100, 60) ) 7 
loadTaskScene () ; 
} 
} 


} 
// 更 改 实现 
void HelloWorld: :loadTaskScene () 
{ 
char name[32] = {0}; 
sprintf (name, "publish/taskScene%d.json", m_taskSceneNum) ; 
auto task = cocostudio: :SceneReader: :getInstance () ->createNodeWithSceneFile (name) ; 
auto realTask = static_cast<cocostudio: :ComRender*> ( 
task—>getChildByTag (10003) ->getComponent ("taskComponent") ) ->getNode () 7 
realTask->setPosition (m_screenOffset) ; 
addPhysicRect (realTask->getChildByTag (2) ); 
attachHitListener (); 
addChild (task); 

















当 点 击 按钮 时 ， 取 得 当前 翻动 页 面 所 在 位 置 。 当 调用 createNodeWithsceneFile 函 数 时 ， 动 态 拼写 一 个 路 径 名 称 作为 载 入 项 。 























编译 运行 ， 就 可 以 选择 关卡 开始 游戏 了 ， 如 图 6-8 所 示 。 














SEE 


图 6-8 关卡 预览 


6.5 ”完善 流程 


完成 选 关 功 能 后 ， 还 需要 完善 输赢 及 重新 开始 的 流程 。 在 本 节 中 我 们 制作 一 个 结果 框 ， 用 于 流程 控制 ， 完 成 效果 如 图 6-9 所 示 。 
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图 6-9 ”结果 框 


6.5.1 ”编辑 结果 框 








我 们 在 第 4 章 中 制作 了 一 个 对 话 框 ， 这 里 我 们 看 看 如 何 将 它 复 用 。 首 先 打开 Cocostudio 项 目 ， 点 击 “文件 ” 一 “新 建 ”一 “新 建 UI 项 目 ”， 在 弹出 的 对 话 框 中 将 项 目 名 更 改 为 GameResult。 








提示 “下面 的 部 分 是 为 了 演示 如 何 将 单独 创建 的 项 目 复 用 ， 如 果 觉 得 没有 必要 如 此 做 ， 可 以 参照 第 4 章 重 新 制作 该 对 话 框 。 


找到 第 4 章 的 CocoStudio 项 目 planeGame, 将 “ 根 目 录 /GameUI/Json” 目 录 下 的 GameOverDlgjson 复 制 到 新 建 GameUI 目 录 下 的 Json 文 件 夹 内 ， 并 把 先前 的 文件 删除 掉 。 








使 用 记事 本 打开 GameResult.xml.ui 文 件 ， 将 JsonList 部 分 更 新 如 下 : 














<JsonList> 
<string>GameOverD1g.json</string> 
</JsonList> 

















更 改 之 后 ， 使 用 CocoStudio 打 开 项 目 文件 。 由 于 目录 结构 的 更 改 ， 对 话 框 有 些 纹理 显示 不 正确 ， 按 照 第 4 章 中 相应 的 部 分 修复 即 可 。 

















编辑 完成 后 ， 导 出 项 目 。 


6.5.2 ”添加 获胜 逻辑 


完成 界面 编辑 后 ， 我 们 再 来 添加 获胜 逻辑 。 获 胜 条 件 是 将 界面 中 的 块 都 清除 干净 。 这 里 我 们 创建 一 个 成 员 变 量 作为 计数 器 ， 在 初始 化 场景 添加 Body 时 ， 此 成 员 变 量 值 


有 砖 块 消去 时 ， 此 成 员 变 量 值 减少 ， 当 该 值 减 为 零 时 ， 游 戏 获胜 。 更 改 后 的 代码 如 代码 清单 6-14 所 示 。 


代码 清单 6-14 ”添加 获胜 逻辑 




















于 记录 场景 中 砖 块 的 总 数量 ， 当 











// 定 义 
int m taskTargetNum; 
// 增 加 
void HelloWorld: :addPhysicRect (cocos2d: :Node* parent) 
{ 
m taskTargetNum = 0;; 
for (auto child:parent->getChildren () ) 
{ 
auto body = PhysicsBody: :createBox (child->getContentSize(), 
PHYSICS MATERIAL BALL WORLD,m_screenOffset) ; 
body->setDynamic (false) ; 
body->setContactTestBitmask (0xFFFFFFFF) ; 
body->setTag (Target) ; 
child->setPhysicsBody (body) ; 
m_taskTargetNum++; 
} 


} 
// 减 少 
void HelloWorld: :attachHitListener () 
{ 
EventListenerPhysicsContact* hitListener = EventListenerPhysicsContact: :create(); 
hitListener->onContactBegin=[=] (const PhysicsContact& contact) 
{ 
auto tagA = contact .getShapeA () ->getBody () ->getTag() ; 
auto tagB = contact .getShapeB () ->getBody () ->getTag (); 
if(tagA == Target || tagB == Target) 
{ 


Node* block = nullptr; 
if (tagA == Target) { 
block = contact .getShapeA () ->getBody () ->getNode () ; 
} 
else 


block = contact.getShapeB () ->getBody () ->getNode () 7 
} 
block->removeFromParent () ; 
m taskTargetNum--; 
if (m taskTargetNum == 0) { 
gameControl (Result) ; 
} 
} 
return true; 
Ve 
Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (hitListener, this) ; 














头 我 们 再 做 流程 整理 。 





回 








与 第 5 章 相同 ， 要 将 流程 控制 写 到 gameControl 函 数 中 。 下 面 先 将 游戏 失败 部 分 完成 ， 


6.5.3 ”添加 失败 处 理 


游戏 失败 是 指 球 碰 到 了 屏幕 底线 。 这 里 我 们 在 initPhysicsWorld 中 增加 一 行 屏幕 底线 ， 同 时 添加 在 碰撞 响应 中 如 何 处 理 ， 如 代码 清和 





代码 清单 6-15 ”失败 处 理 








// 添 加 底线 
void HelloWorld: :initPhysicsWorld() 


auto dieLine = Sprite::create(); 

auto dieLineBody = PhysicsBody: :createEdgeBox (Size (visibleSize.width, 6), 
PHYSICS MATERIAL BALL WORLD, 3) ; 

dieLineBody->setTag (DieLine) ; 

dieLineBody->setContactTestBitmask (OxFFFFFFFF) ; 

dieLine->set Position (Point (visibleSize.width/2,10)); 

dieLine->set PhysicsBody (dieLineBody) ; 

this->addChild(dieLine) ; 


$ 

// 添 加 判断 

void HelloWorld: :attachHitListener () 
{ 


if (tag == Target || tagB == Target) 
{ 


} 

else if(tagA == DieLine || tagB 一 DieLine){ 
gameControl (Result) ; 

$ 





我 们 添加 一 个 宽度 很 小 的 方形 ， 将 它 放置 在 场景 底部 ， 并 将 Tag 设 为 DieLine。 在 玩 游戏 过 程 中 ， 如 果 碰 到 了 这 个 小 方形 ， 就 判定 为 游戏 结束 。 


65.4 ”梳理 流程 
我 们 整理 一 下 思路 ， 将 所 有 流程 都 整理 到 gameControl 中 。 游 戏 流程 包括 欢迎 、 游 戏 中 ， 游 戏 结果 三 个 部 分 。 我 们 将 对 应 的 创建 都 移动 到 对 应 的 逻辑 分 支 中 ， 如 代码 清单 6-16 所 示 。 


代码 清单 6-16 ”创建 gameControl 





// 定 义 状 态 

enum GameState { 
Welcome = 0, 
Game, 
Result 


void gameControl (GameState gameState) ; 
// 实 现 
void HelloWorld: :gameControl (GameState gameState) 
{ 
switch (gameState) { 
case Welcome: 
{ 
removeAl1Children () ; 
auto welcome = dynamic_cast<Widget*>(cocostudio: :GUIReader: :getInstance () 
->widgetFromJsonFile ("publish/welcome «json")); 
welcome->setPosition (m_screenOffset) ; 
loadPageList (welcome) ; 
addChild (welcome) ; 
auto start = dynamic_cast<Widget*>(welcome->getChildByName ("Start") ) ; 
start->addTouchEventListener (this, toucheventselector 
(HelloWorld: :touchButton) ) ; 
break; 
} 
case Game: 
{ 
this-—>removeAl1Children () ; 
Director: :getInstance () ->getEventDispatcher () ->removeAllEventListeners () ; 
initPhysicsWorld(); 
createBall (Point (100,100) ); 
createPaddle (Point (100, 60) ); 
loadTaskScene () ; 
break; 


case Result: 
{ 
Director: :getInstance () ->getEventDispatcher () -> 
removeAll EventListeners () ; 
Director: :getInstance () ->getRunningScene () ->getPhysicsWorld()-> removeAl11Bodies () ; 
removeAl1Children () ; 
auto result = dynamic_cast<Widget*>(cocostudio: :GUIReader: :getInstance () 
—>widgetFromJsonFile ("publish/GameOverDlg. json") ) ; 
Text* text = dynamic_cast<Text*>(result-—>getChildByName ("Background") 
->getChildByName ("OverLabel") ) ; 
if (m_taskTargetNum == 0) 
{ 
text—>setText ("You Win!!"); 
} 
else 
{ 
text->setText ("You Losehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/..."); 
} 
auto start =dynamic_cast<Widget*>(result-> 
getChildByName ("Background") ->getChildByName ("Restart") ) ; 
start->addTouchEventListener (this, toucheventselector 
(HelloWorld: :touchButton) ) ; 
auto back = dynamic_cast<Widget*>(result-> 
getChildByName ("Background") ->getChildByName ("BackMain") ) 7 
back->addTouchEventListener (this, toucheventselector 
(HelloWorld: :touchButton) ) ; 
result->setPosition (m_screenOffset) ; 
this->addChild (result); 
break; 
} 
default: 
break; 
i 











然后 分 别 在 初始 化 、 点 击 响应 中 调用 gameControl 函 数 ， 如 代码 清单 6-17 所 示 。 








代码 清单 6-17 ”调用 控制 





// 初 始 化 中 的 调用 
bool HelloWorld: :init() 
{ 


gameControl (Welcome) ; 
return true; 


} 
// 点 击 响应 中 的 调用 
void HelloWorld: :touchButton (cocos2d: :Object *object, cocos2d::gui:: TouchEventType type) 


if (type == TOUCH_EVENT ENDED) { 
auto buttonName = dynamic_cast<Widget*> (object) ->getName () ; 
if (buttonName.compare ("Start") == 0) 
{ 
m_taskSceneNum = (int)m_taskPage->getCurPageIndex () +1; 
gameControl (Game) ; 


else if (buttonName.compare ("Restart") == 0) 
{ 


gameControl (Game) ; 


else if (buttonName.compare ("BackMain") == 0) 
{ 
gameControl (Welcome) ; 


} 








最 后 我 们 去 掉 调 试 层 ， 将 “DEBUGDRAW ALL" 的 设置 改 为 “DEBUGDRAW_NONE”， 如 代码 清单 6-18 所 示 。 


代码 清单 6-18 更改 DebugDraw 


Scene* HelloWorld: :createScene () 


// 'scene' is an autorelease object 

auto scene = Scene: :createWithPhysics (); 

scene->get PhysicsWorld () ->setDebugDrawMask (PhysicsWorld: : DEBUGDRAW_NONE) ; 
scene->getPhysicsWorld()->setGravity (Vect (0,0) ); 





编译 运行 ， 打 砖 块 游戏 就 完成 了 。 


6.6 小 结 












































这 一 章 进一步 介绍 了 如 何 使 用 物理 引擎 ， 使 读者 能 够 使 用 物理 引擎 操作 元 素 的 移动 ， 掌 握 如 何 使 用 场景 编辑 器 制作 场景 ， 熟 悉 多 关卡 的 制作 流程 ， 并 能 够 通过 翻动 控件 实现 关卡 预览 。 





第 7 章 塔 防 (上 ) 


这 天 ， 朝 朝 把 文 彪 拉 到 一 旁 问 : “你 说 劲松 他 真 的 …… 就 能 当做 什么 都 没 发 生 ? ”。 
文 彪 摆 摆 手 ， 回 答 道 : “当然 不 能 啦 ， 以 我 的 经 验 来 看 ， 他 分 明 就 是 口是心非 。 你 看 他 最 近 几 天 ， 总 是 心神 不 宁 的 。” 


“WR? 这 我 倒 没 感觉 到 。 不 过 依 我 看 ， 当 你 无 法 理解 事情 为 何如 此 发 展 时 ， 你 一 定 没 能 了 解 整个 事情 的 全 貌 。 所 以 我 认为 ， 他 们 之 间 肯 定 发 生 过 咱们 不 知道 的 事 ”， 朝 朝 十 分 肯定 地 说 ，“ 从 目前 的 情 
况 分 析 ， 玉 这 个 好 兄弟 可 能 是 入 手 点 ， 从 没 听 过 劲松 提起 他 。” 


“我 不 这 么 认为 ”， 文 虎 扬 摇头 ，“ 兄 弟 的 情谊 哪 能 因为 女人 破坏 ， 你 没 抢 过 兄弟 的 女 朋友 ， 或 被 兄弟 的 女 朋 友 抢 2 ” 


发 现 朝 朝 用 一 探究 竟 的 眼神 望 着 自己 ， 文 肛 知 道 自己 说 走 了 嘴 ， 忙 往 回 圆 场 : “总 之 …… 
胎 。 喂 ， 你 不 要 这 样 看 着 我 。” 


咱 并 不 知道 源 对 劲松 的 态度 ， 感 情 本 来 就 是 两 个 人 的 事 。 女 神 面 对 这 种 情况 ， 都 不 会 主动 的 ， 这 是 最 完美 的 备 


“ 文 允 咱 ， 你 是 不 是 有 什么 事情 要 告诉 我 咱 ， 你 抢 过 兄弟 的 女 朋 友 ? ” 朝 朝 一 脸 坏 笑 ， 向 文 彪 走 来 。 

“去 去 去 ， 离 我 远 点 ”， 文 须 一 回头 ， 看 到 了 萌 神 ，“ 萌 神 ， 救 我 啊 ， 朝 朝 好 像 要 暴走 了 。” 

“OQ? 哦 ， 我 是 来 打 普 油 的 。 另 外 ， 你 们 看 到 劲松 了 吗 ? ” 

“你 也 觉得 他 最 近 有 问题 ” 朝 朝 、 文 彪 齐 声 问 道 。 

“什么 问题 啊 ? ” 萌 萌 挠 挠 头 ，“ 我 有 个 朋友 的 老板 听 说 他 能 做 手机 游戏 ， 要 找 他 做 私 活 ， 做 个 小 手 游 。 你 们 说 的 是 这 个 事 吗 ? ” 
“ 额 ， 似 乎 不 是 。 你 有 个 朋友 ， 我 们 哪 知道 是 谁 啊 。” 文 彪 回答 道 ，“ 外 包 小 游戏 吗 ? 要 做 个 什么 类 型 的 ? ” 

“ 听 说 是 要 做 个 塔 防 游戏 ， 之 前 劲松 也 没 做 过 。 找 他 问 问 接 不 接 活 。” 萌 萌 答 道 。 

“他 晚上 回来 ， 你 问 他 吧 。 他 要 是 接 活 了 ， 就 印证 了 我 的 猜测 ， 他 是 在 逃避 。” 朝 朝 对 萌 神 说 ， 似 乎 又 在 对 自己 说 …… 


第 二 天 ， 劲 松 接 下 了 外 包 ， 开 始 开发 塔 防 游戏 。 


7.1 瓦 片 地 图 














本 节 我 们 将 介绍 瓦 片 地 图 的 概念 ， 并 使 用 它 来 制作 一 个 关卡 场景 ， 完 成 效果 如 图 7-1 所 示 。 























图 7-1 瓦 片 地 图 制作 关卡 


7.1.1 概念 介绍 








瓦 片 地 图 (TileMap) 是 场景 更 加 丰富 或 更 多 变 时 的 一 种 处 理 模式 。 瓦 片 地 图 
地 图 的 优点 在 于 所 有 的 元 素 都 是 对 齐 的 ， 














主要 用 来 制作 场景 。 





景 中 的 元 素 都 是 “ 瓦 片 ” 











瓦 片 地 图 支持 正 交 视图 、 等 轴 视 图 

















因此 可 以 方便 地 处 理 位 置 的 关系 。 另 外 它 也 支持 层 的 概念 ， 可 以 将 元 素 或 信息 分 层 处 理 。 





和 六 边 形 视图 。 正 交 视 图 指 的 是 俯视 的 视角 ， 即 瓦 片 是 正方 形 ， 水 平 垂直 排列 等 轴 视 图 





( 斜 角 地 图 














瓦 片 是 六 边 形 ， 它 通常 用 在 SLG 类 型 游戏 中 。 在 Cocos2D-X 的 TestCpp 中 我 们 可 以 分 别 看 到 如 图 





7-2~ 图 7-4 所 示 的 例子 。 





) 是 45" 斜 视 排列 ， 就 是 通常 我 们 说 的 2.5D; 六 边 形 视图 


它们 都 有 相同 的 尺寸 。 瓦 片 一 格 一 格 地 拼接 起 来 ， 就 组 成 了 场景 。 瓦 片 





则 是 指 





图 7-2 EXILE 


TMX Iso VertexZ 





Sprite should hide behind the trees 


alnMenu 


7.1.2 编辑 器 





截至 本 书 完成 时 ，CocoStudio 只 支持 瓦 片 地 图 的 导入 ， 还 不 支持 瓦 片 地 


图 7-3 ”等 轴 视 图 
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图 7-4 ”六 边 形 视 
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图 的 编辑 。 所 幸 ， 我 们 有 另外 一 款 优秀 的 编辑 器 : TiledMap Editor。 这 个 编辑 器 使 有 








Qt 编写 ， 是 免费 开源 的 软件 ， 使 


Mets vera 























直接 编辑 直角 和 和 斜 角 的 瓦 片 地 图 。 我 们 可 以 去 http://www.mapeditor.org 下 载 最 新 版 本 的 TiledMap。 








注意 最 早 TileMap 是 用 Java 开 发 的 ， 后 来 改 用 Qt。 





安装 非常 简单 ， 此 处 不 复述 。 安 装 完成 后 ， 运 行 编辑 器 ， 效 果 如 图 7-5 所 示 。 











目前 官网 上 依然 能 下 载 到 Java 版 本 的 编辑 器 ， 但 已 经 不 再 对 这 种 版 本 进行 维护 了 。 本 书 使 用 的 是 Qt 版 本 的 编辑 器 。 


它 可 以 


VHF) RRE 视图 (V) 地 图 (M) BEN 帮助 (H) 
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图 7-5 TiledMap 运 行 图 


71.3 创建 工程 


安装 好 工具 ， 我 们 来 创建 一 个 塔 防 游戏 的 地 图 。 





打开 编辑 器 ， 选 择 “ 文 件 ” 一 “新 文件 ”， 在 弹出 的 对 话 框 中 设置 地 图 。 由 于 我 们 要 采用 80*80 大 小 的 格子 ， 而 我 们 的 背景 要 采用 960*640 的 尺寸 ， 因 此 将 宽度 和 高 度 就 分 别 填 写 为 8 和 和 12， 如 图 7-6 所 








块 大 小 


RE: 80 像素 点 
mE: 80 像素 点 
960 x 640 像素 点 





图 7-6 ”新 建 项 目 设置 
创建 好 新 项 目 之 后 ， 将 其 保存 。 创 建 一 个 名 为 TowerTileMap 的 文件 夹 ， 将 项 目 保存 到 这 个 路 径 下 ， 命 名 为 gate1。 


技巧 ”点击 菜单 中 “视图 ”一 “显示 网 格 ”， 将 对 应 的 网 格 显示 出 来 。 另 外 ， 我 们 也 可 以 点 选 右 下 角 的 百分比 下 拉 框 ， 调 整 工作 区 的 整体 缩放 。 





接着 我 们 来 加 入 新 的 图 块 。 点 击 菜单 “地 图 ”一 “新 图 块 ”， 设 置 图 块 的 名 称 为 towerBlocks。 此 外 ， 我 们 找到 光盘 中 “Chapter 7/mapResource” 下 的 图 片 towerBlocks.png， 将 它 复制 到 
TowerTileMap/TileResource 路 径 中 。 在 图 像 栏 点 选 “ 浏 览 ”， 在 弹出 的 对 话 框 中 找到 这 个 文件 。 最 后 ， 将 块 大 小 设置 为 80*80， 边 距 设置 为 0， 间 距 设置 为 1。 设 置 好 后 点 击 确定 ， 可 以 看 到 右 下 角 图 块 选 
项 卡 中 添加 了 这 个 图 块 ， 如 图 7-7 所 示 。 















































7.1.4 ”编辑 场景 








添加 好 了 图 





块 ， 我 们 就 可 着 手 编辑 场景 了 。 


在 “图 层 ” 标 签 中 双击 默认 图 层 ， 将 其 名 称 更 改 为 “main”。 在 “图 


路 。 


最 后 在 地 图 





上 放 些 杂 物 ， 使 场景 看 起 来 不 那么 死板 ， 如 图 








7-8 所 示 。 


图 7-7 添加 图 块 


块 ”标签 区 域 中 点 击 代 表 路 径 的 图 








块 ， 然 后 再 点 击 工具 栏 中 的 图 





章 刷 ， 最 后 连续 点 击 工作 区 中 的 空白 部 分 ， 勾 画 出 一 条 小 怪物 走 的 











A7-8 ”勾画 场景 








由 于 制作 完成 的 瓦 片 地 图 工程 就 是 一 个 程序 可 读 的 文件 ， 因 此 不 需要 导出 。 








7.1.5 “加 载 到 程序 


最 后 一 步 是 把 场景 加 载 进来 。 打 开 CocoStudio 的 场景 编辑 器 ， 点 击 “ 文 件 ” 一 “新 建 项 目 ” 一 “新 建 游戏 项 目 ”， 在 弹出 的 对 话 框 中 将 游戏 项 目 名 更 改 为 Tower， 义 选 掉 “No Code” ， 更 改 游戏 包 
名 ， 如 图 7-9 所 示 。 





新 建 游 戏 项 目 Tower 


三 C:\Code\ 


游戏 包 名 称 com.fansy.Tower 


No Code e Cpp Lua cocos2d-x 3.0rc: ¥ 


Cocos2D-X 


Ver 3.0rcl http://www.cocos?d-x.or 


点 击 确定 后 中 





图 7-9 创建 项 目 





成 功 创建 了 项 目 。 打 开工 程 目 录 ， 不 难 发 现代 码 项 目 和 编辑 器 项 目 已 经 整合 到 一 起 。 这 样 当 我 们 在 CocoStudio 中 导出 项 目 时 ，publish 中 的 资源 会 直接 导出 到 代码 工程 的 Resources 目 录 























中 ， 目 录 结 构 如 图 7-10 所 示 。 





b’ Classes 


cocos7d 
|. CocoStudio 


b proj.android 


|. f= a. I E oo. m ELE "E a: 








roj.linux 


roj.win32 


mh Priv]. mMs_iiiat 


ro|.wp8-xam 


ESOUTCES 


MakeLists 


B Tower.xml 








将 编辑 瓦 片 地 图 的 TowerTileMap 目 录 复 制 到 “ 根 目录 /Resources” 中 ， 另 外 将 光盘 中 “Chapter 7/towerResource” 下 的 background.png 也 复制 到 这 里 。 更 改 init 中 的 代码 ， 如 代码 清单 7-1 所 示 。 











代码 清单 7-1 ”加载 瓦 片 地 图 





图 7-10 ”目录 结构 





// 在 HellcWor1ld.h 中 添加 成 员 变量 定义 
private: 

cocos2d: :TMXTiledMap* m_tileMap; 
// 实 现 
bool HelloWorld::init() 


{ 
W71111111111111111111111111111 
// 1. super init first 
if ( !Layer::init() ) 
{ 
return false; 


} 


auto back = Sprite: :create ("background.png") ; 


back->setAnchorPoint (Point: : ZERO) ; 
addChild (back, 0) ; 


m_tileMap = TMXTiledMap: :create ("TowerTileMap/gatel.tmx") ; 
m_tileMap->setPosition (Point: : ZERO) ; 


addChild(m_tileMap, 1); 
return true; 











在 上 面 的 代码 中 ， 我 们 先 插 入 了 一 张 背景 





[ 


























， 然 后 通过 调用 TMXTiledMap::create 函 数 来 创建 一 个 瓦 片 地 图 的 实例 ， 并 且 调 

















最 后 我 们 再 来 设置 适 配 模式 ， 如 代码 清单 7-2 所 示 。 








代码 清单 7-2 设置 适 配 

















addChild 将 : 


加 载 到 场景 中 。 











bool AppDelegate: :applicationDidFinishLaunching() { 


// initialize director 


auto director = Director::getInstance () 7 
auto glview = director->getOpenGLView () ; 


if(!glview) { 


glview = GLView: :create ("Tower"); 
director->setOpenGLView (glview) ; 


glview->setDesignResolutionSize (960, 640, ResolutionPolicy: :EXACT FIT); 
// turn on display FPS 5 
director->setDisplayStats (true) ; 

// set FPS. the default value is 1.0/60 if you don't call this 
director->setAnimationInterval (1.0 / 60); 

// create a scene. it's an autorelease object 

auto scene = HelloWorld: :createScene () ; 

// ron 

director->runWithScene (scene) ; 

return true; 





编译 运行 即 可 看 见 场景 加 载 。 


注意 ”使 用 TileMab 的 场景 有 时 会 出 现 黑 线 ， 这 个 问题 可 以 通过 更 改 cocos/2d/ccConfigh 中 的 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1 来 解决 。 默 认为 0， 表 示 不 开启 。 完 成 更 改 后 要 重新 
编译 libcocos2d.lib。 


7.2 标记 路 径 


在 上 一 节 中 我 们 编辑 了 一 条 路 ， 这 节 我 们 要 让 小 怪物 沿 着 这 条 路 移动 ， 效 果 如 图 7-11 所 示 。 
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图 7-11 沿路 径 移动 


7.2.1 创建 对 象 层 





对 象 层 是 在 瓦 片 地 图 中 用 来 做 标记 的 层 ， 通 常用 来 标记 与 位 置 相关 的 触发 点 ， 比 如 敌人 触发 区 域 、 陷 阱 等 。 这 里 我 们 利用 它 来 创建 一 条 移动 的 路 径 。 








首先 在 “图 层 ” 选 项 卡 中 右 击 ， 在 选择 “新建 对 象 层 ” 后 会 自动 创建 一 个 对 象 层 ， 双 击 它 ， 将 其 更 名 为 Walk。 然 后 点 击 上 方 工具 栏 中 的 插入 矩形 ， 在 路 径 开 始 的 地 方 点 击 ， 即 可 画 出 一 个 灰色 的 矩形 ， 
这 就 是 我 们 要 的 标记 了 。 我 们 需要 的 只 是 坐标 位 置 ， 所 以 矩形 的 大 小 并 不 影响 结果 。 依 次 在 拐角 处 点 击 ， 将 所 有 的 拐角 都 按 顺序 编辑 出 来 ， 如 图 7-12 所 示 。 


gatel. tnx 回 








Set+ss = 











| towerBlocks | 


E GS ex 
i 


JSBasee 


地 形 | BR 














图 7-12 ”编辑 路 径 


编辑 好 后 保存 项 目 。 


7.2.2 ”加 载 移动 


地 图 中 的 路 径 信息 ， 说 到 底 是 点 位 置 的 信息 ， 我 们 将 它 的 位 置 取出 来 ， 保 存 到 一 个 数组 中 ， 以 便 在 创建 移动 的 动作 时 使 用 。 因 此 ， 我 们 添加 一 个 成 员 变量 ， 并 在 初始 化 时 读 出 对 应 的 值 ， 代 码 如 下 : 











// 声 明 

std: :vector<cocos2d: :Point> m_pathVec; 
// 调 用 ， 在 init 函 数 中 

m_pathVec = getWalkPath ("Walk") ; 





为 了 取得 路 径 信息 ， 我 们 要 添加 并 实现 getWalkPath 函 数 ， 如 代码 清单 7-3 所 示 。 


代码 清单 7-3 ”实现 读 取 路 径 





// 声 明 
private: 
std: :vector<cocos2d::Point> getWalkPath( const char* key); 
// 实 现 
std: :vector<cocos2d: :Point> HelloWorld::getWalkPath( const char* key) 
{ 
std: :vector<cocos2d: :Point> pathVec; 
if (!m tileMap) 
{ 
CCLOG("Can't Find Map.Please Load Map First!"); 
return pathVec; 
} 
TMXObjectGroup* walk = m_tileMap->getObjectGroup (key) ; 
if (!walk) 
{ 
CCLOG("No Such Key = %s In TileMap!", key) ; 
return pathVec; 


f 

ValueVector path = walk->getObjects (); 

int myX = 0; 

int myY = 0; 

for (auto pos : path) 

{ 
myX = pos.asValueMap () ["x"] .asInt (); 
myY = pos.asValueMap () ["y"] .asInt (); 
pathVec.push_back (Point (myX,myY) ) ; 


} 
return pathVec; 





调用 getObjectGroup 可 以 取 到 对 应 的 对 象 层 ， 这 里 取得 的 是 Walk 层 ; 调用 对 象 层 的 getObejcts 方 法 可 以 取 到 点 数组 。 


7.2.3 ”移动 怪物 


取得 了 路 径 ， 我 们 就 可 以 通过 Action 的 方式 沿 着 路 径 移 动 怪物 。 添 加 一 个 名 为 makeMonster 的 函数 ， 考 虑 到 产生 怪物 是 周期 性 的 行为 ， 这 个 函数 会 作为 一 个 Schedule 的 回调 函数 反复 调用 。 这 里 我 们 
直接 将 makeMonster 国 数 声明 为 Schedule 回调 的 函数 。 


代码 清单 7-4 ”创建 移动 的 怪物 





// 声 明 


void makeMonster (float dt); 
// 调 用 ， 在 init 函 数 末尾 
makeMonster (0) ; 
// 实 现 
void HelloWorld: :makeMonster (float dt) 
{ 
auto monster =Sprite: :create("Monster.png") 7 
auto path = m_pathVec; 
if (path.size() == 0) 
{ 


return 3 


Vector<FiniteTimeAction*> actionsArray; 
auto startPos = path.at(0); 
for (unsigned int i = 1;i<path.size();++i) 


float duration = path.at (i-1) .getDistance (path.at (i)); 
float time = duration/100.0f; 
actionsArray.pushBack (CCMoveTo: :create (time, path.at(i))); 
} 
auto action = CCSequence: :create (actionsArray) ; 
monster->setPosition (startPos) ; 
monster->runAction (action) ; 
addChild (monster, 2) ; 


以 上 代码 的 逻辑 比较 简单 ， 首 先 创建 一 个 怪物 的 Sprite， 然 后 使 用 一 个 数组 结构 ， 将 按 折线 运动 的 动作 储存 起 来 ， 最 后 让 怪物 依次 执行 运动 动作 。 





将 光盘 中 “Chapter 7/towerResource” 下 的 Monster.png 复 制 到 Resources 目 录 下 。 编 译 运行 ， 就 可 以 看 见怪 物 走 在 我 们 编辑 的 路 径 上 。 


7.3 面向 组 件 编程 


根据 先前 游戏 的 经 验 ， 越 早 确定 好 大 体 架 构 ， 后 期 维护 的 改动 就 越 小 。 这 里 我 们 就 梳理 一 下 架构 ， 将 移动 的 逻辑 组 件 化 。 








7.3.1 “Cocos2D-X 对 组 件 的 支持 





面向 组 件 编程 是 指 将 功能 模块 化 成 一 个 个 组 件 ， 在 使 用 时 ， 将 组 件 挂 载 到 对 应 的 对 象 上 ， 从 而 实现 相应 的 功能 。 这 样 做 的 好 处 是 可 以 将 各 个 功能 组 件 灵活 地 搭配 ， 同 时 有 利于 组 件 的 扩展 。 



































Cocos2D-X 3.0 中 加 入 了 对 组 件 (Component) 的 支持 : 在 元 素 的 基 类 Node 中 ， 增加 了 一 个 ComponentContainer 的 存储 结构 ， 用 来 存储 元 素 上 挂 载 的 Component。 这 个 存储 结构 是 一 个 Map 结 
构 ， 键 是 Component 的 名 字 ， 值 是 对 应 Component 的 指针 。 在 Node 中 还 添加 了 addComponent、removeComponent 和 getComponent 等 基本 的 方法 来 管理 组 件 。Component 类 是 Object 的 子 类 ， 
当 它 被 添加 到 元 素 上 时 ， 会 自动 记录 它 的 所 有 者 。 每 一 个 Component 都 应 当 有 自己 的 名 字 ， 可 以 通过 调用 它 的 函数 setName 来 设置 。 通 常 来 说 ， 我 们 不 会 直接 使 用 Component 类 实例 化 ， 而 是 重 做 一 个 它 
的 子 类 。 




































































7.3.2 ”制作 组 件 

















下 面 以 沿 固定 路 径 移动 为 例 ， 学 习 如 何 将 功能 改造 成 组 件 。 在 动手 之 前 ， 我 们 要 确定 组 件 需要 的 参数 。 既 然 是 沿 一 定 路 径 移 动 ， 就 要 把 路 径 传 进 去 。 在 构造 函数 方面 ， 我 们 应 采用 Cocos2D-X 的 格式 ， 
通过 重 写 create 函 数 来 进行 创建 ， 并 通过 引用 计数 的 方式 进行 自动 管理 。 





















































首先 , 我们 在 “ 根 目 录 /Classes” 中 创建 一 个 名 为 Components 的 文件 夹 。 在 Visual Studio 的 代码 工程 中 右 击 Tower 工 程 中 的 Classes 文 件 夹 ， 在 弹出 的 下 拉 菜 单 中 选择 “添加 ”-> “新 建 筛选 器 ”， 将 
创建 的 筛选 器 改名 为 Components。 





右 击 Component 筛 选 器 ， 在 下 拉 菜 单 中 选择 “添加 ”-> “新 建 项 ”。 更 改 “ 位 置 ” 为 Components 目 录 ， 创 建 两 个 文件 一 “ComMove.h” 和 “ComMove.cpp”。 然 后 在 其 中 创建 一 个 名 
为 “ComMove” 的 类 ， 它 继承 自 Component， 声 明 与 实现 如 代码 清单 7-5 所 示 。 



































代码 清单 7-5 (EAR 








//ComMove.h 

#ifndef Tower ComMove h 

#define Tower ComMove h 

#include "cocos2d.h" 7 

class ComMove : public cocos2d::Component 


{ 


public: 

static ComMove* create (std: :vector<cocos2d::Point> path); 
protected: 

ComMove (std: :vector<cocos2d::Point> path) ; 
private: 


std: :vector<cocos2d: :Point> m path; 
ti 
#endif 
//ComMove . cpp 
#include "ComMove.h" 
using namespace cocos2d; 
ComMove: : ComMove (std: :vector<Point> path) 
{ 
setName ("ComMove"™) ; 
m_path = path; 


ComMove* ComMove::create (std: :vector<Point> path) 
{ 
ComMove * ret = new ComMove (path) ; 
if (ret != nullptr && ret->init()) 
{ 
ret->autorelease () 7 


else 
CC_SAFE_DELETE (ret) 7 


return ret; 











在 create 函 数 中 ， 我 们 仿照 Cocos2D-X 中 的 写法 ,调用 Ref 对 象 中 的 autorelease 函 数 ， 将 其 加 入 到 内 存 池 中 进行 管理 。 











7.3.3 ”初始 化 数据 























构造 函数 已 经 通过 参数 获取 了 路 径 ， 我 们 还 应 该 在 构造 函数 中 执行 其 他 操作 吗 ?” 答 案 是 否定 的 ， 构 造 函数 应 该 尽量 简单 ， 以 防止 在 构造 时 出 现 不 易 追 查 的 问题 。 另 外 ， 有 些 信息 在 组 件 加载 到 元 素 上 之 
arg 


后 才能 获取 到 。 比 如 ， 某 些 结构 可 能 需要 组 件 所 有 者 的 信息 ， 这 些 信息 在 初始 化 时 是 没有 的 。 因 此 ， 我 们 要 重 写 onEnter 函 数 ， 这 个 函数 在 组 件 进入 场景 之 前 会 被 调用 。 我 们 在 类 中 添加 一 个 成 员 变 量 ， 用 
来 存储 路 径 的 动画 ， 如 代码 清单 7-6 所 示 。 


























代码 清单 7-6 创建 动作 


// 添 加 定义 ComMove.h 


public: 

virtual void onEnter () override; 
private: 

void initPath (std: :vector<cocos2d::Point> path); 
private: 


cocos2d::Point m_startPos; 
__cocos2d::Action* m_moveActions; 
// 实 现 ComMove .cpp 
const float NORMAL SPEED = 150.0f; 
void ComMove: :initPath (std: :vector<cocos2d: :Point> path) 
{ 
if (path.size() == 0) 
{ 
return ; 
} 
Vector<FiniteTimeAction*> actionsArray; 
m_startPos = path.at (0); 
for (unsigned int i = 1;i<path.size();++i) 
{ 
float duration = path.at(i-1) .getDistance (path.at (i)); 
float time = duration/NORMAL_ SPEED; 
actionsArray.pushBack (CCMoveTo: :create (time, path.at(i))); 
} 


m moveActions = CCSequence: :create (actionsArray); 


void ComMove: :onEnter () 
{ 

initPath (m path); 
} 











创建 移动 动作 的 方式 与 7.2 节 介绍 的 方法 一 样 。 为 了 方便 ， 我 们 定义 了 一 个 全 局 的 速度 值 ， 


可 


73.4 调用 移动 














数据 、 动 作 都 准备 好 了 ， 最 后 要 添加 一 个 调用 接口 。 在 类 中 添加 一 个 startMove 成 员 函 数 ， 














代码 清单 7-7 ”实现 调用 动作 


// 声 明 
public : 
void startMove(); 
// 实 现 
void ComMove: :startMove () 
{ 
auto owner = getOwner (); 
if (!m_moveActions) { 
CCLOG("Error! Move Action is Empty"); 
return; 


owner->setPosition (m_startPos) ; 
owner->runAction (m_moveActions) 7 


7.3.5 EREDA 




















在 其 中 调 


来 控制 怪物 移动 的 速度 。 




















先前 的 动作 ， 如 代码 清单 7-7 所 示 。 

















在 创建 好 调用 后 ， 我 们 再 来 看 看 如 何 挂 载 。 通 常 我 们 会 写 很 多 的 组 件 ， 为 了 包含 这 些 组 件 的 头 文件 ， 可 能 还 需要 重复 写 很 多 次 ， 














Constants.h 文 件 ， 将 ComMeove 包 含 其 中 ， 如 代码 清单 7-8 所 示 。 





代码 清单 7-8 组件 总 头 文件 








因此 我 们 要 添加 一 个 总 的 头 文件 。 在 Components 文 件 夹 中 创建 一 个 





#ifndef Tower_Constants_h 
#define Tower Constants h 
#include "ComMove.h" 
#endif 

















以 后 再 添加 组 件 就 只 需 扩展 这 个 文件 即 可 。 





注意 在 打包 Android 时 ， 要 更 改 jni 中 的 Android.mk 文 件 ， 将 Components 文 件 夹 添加 到 LOCAL _C_INCLUDES 的 包含 文件 夹 中 ， 对 应 实现 的 cpp 文 件 也 要 加 入 到 LOCAIL SRC_FILES 的 文件 列表 中 。 


最 后 ， 我 们 更 改 makeMonster 函 数 ， 将 组 件 挂 载 到 sprite 上 ， 如 代码 清单 7-9 所 示 。 


代码 清单 7-9 JERAN 





// 添 加 头 文件 
#include "Components/Constants.h" 
// 更 改 实现 
void HelloWorld: :makeMonster (float dt) 
{ 
auto monster =Sprite: :create ("Monster.png") ; 
auto path = m_pathVec; 


if (path.size() == 0) 
{ 
return 7 


auto comMove = ComMove::create(m_pathVec) ; 
monster->addComponent (comMove) ; 

addChild (monster, 2) ; 

comMove->startMove () 7 


编译 运行 ， 即 可 看 到 挂 载 着 移动 组 件 的 怪物 沿 着 路 径 行走 。 


7.4 防御 塔 


制作 好 了 攻击 的 怪物 ， 这 一 节 我 们 来 制作 防御 塔 ， 主 要 实现 防御 塔 的 建造 。 我 们 不 仅 需 要 知道 如 何 加 入 点 击 响应 ， 也 需 








知道 如 何 将 





幕 中 点 击 的 位 置 转 换 为 瓦 片 地 

















中 的 位 








。 完 成 效果 如 


网 











7-13 所 


7.4.1 制作 标记 层 


首先 要 在 瓦 片 地 图 


打开 assets 目 录 中 的 瓦 片 地 图 gate1， 在 右 侧 图 层 区 右 击 ， 点 击 新 建 图 层 ， 新 建 一 个 图 层 取 名 为 meta。 找 到 图 














选择 “图 





块 





属性 ”， 会 打开 图 块 























属性 对 话 框 ， 在 其 中 将 名 称 更 改 为 “Build”,， 值 为 “True”， 


mes 


4 


图 7-13 ”添加 防御 塔 


如 


上 编辑 可 建造 区 域 。 不 是 所 有 的 地 方 都 可 以 建造 防御 塔 ， 因 此 我 们 创建 一 个 新 的 块 层 ， 用 来 做 标记 。 








图 7-14 所 示 。 点 击 保存 ， 完 成 





图 块 属性 设置 。 


5 


Q 











块 资源 中 那个 纯 绿色 的 块 ， 它 是 用 来 标记 可 建造 区 域 的 。 在 图 











块 上 右 击 ， 从 弹出 的 菜单 中 





图 7-14 设置 图 块 属性 














在 设置 好 属性 后 ， 选 中 绿色 图 块 ， 点 选 “ 图 章 刷 ” 工 具 ， 在 可 以 放置 塔 的 位 置 ， 填 充 这 个 图 块 ， 如 图 7-15 所 示 。 






































gatel. tax 回 









































图 7-15 ”建造 区 域 图 块 
编辑 好 后 保存 项 目 。 不 要 忘记 将 编辑 完成 的 文件 复制 到 Resources 中 。 
74.2 ”创建 点 击 


在 创建 点 击 响应 时 我 们 需要 添加 一 个 attachTowerBuild 函 数 ， 当 点 击发 生 时 ， 调 用 创建 防御 塔 的 功能 ， 如 代码 清单 7-10 所 示 。 


代码 清单 7-10 ”创建 点 击 





// 声 明 

void attachTowerBuild(); 
// 调 用 在 init 中 
attachTowerBuild() ; 

// 实 现 

void HelloWorld: :attachTowerBuild() 
{ 





auto listener = EventListenerTouchOneByOne: :create () ; 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 
{ 

return true; 
i 
listener->onTouchEnded = [=] (Touch *pTouch, Event *pEvent) 


auto touchPos = pTouch->getLocation () 7 
createTower (touchPos) ; 

hi 

Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (listener, this); 





创建 点 击 响应 的 代码 很 简单 ， 当 点 击 完成 时 ， 将 点 击 的 位 置 传 进 createTower 函 数 中 。 


743 ZIEH 





建造 防御 塔 的 最 大 问题 是 ， 如 何 对 应 点 击 屏幕 位 置 和 瓦 片 地 图 具体 格子 的 位 置 。 同 时 还 要 能 够 取出 对 应 格子 的 属性 值 ， 检 验 此 位 置 是 否 可 以 建造 防御 塔 。 





在 瓦 片 地 图 中 ， 每 一 块 瓦 片 都 有 一 个 唯一 的 GID。 以 这 个 GID 为 键 ， 存 储 着 属性 值 集合 ， 因 此 我 们 只 要 找到 点 击 格子 的 GID， 就 能 够 确定 属性 值 。TMXLayer 类 中 有 对 应 的 函数 可 以 取 到 对 应 格子 上 的 
GID， 这 个 函数 的 参数 就 是 格子 的 位 置 。GID 是 Point 类 型 ， 即 (x, y) 的 二 维 描述 。 所 以 我 们 只 要 把 点 击 位 置 转 化 为 格子 位 置 就 可 以 了 。 格 子 的 坐标 系 是 以 左上 为 原点 ， 横 向 向 右 为 X 轴 。 











我 们 不 但 需要 写 一 个 坐标 转化 函数 ， 将 点 击 坐 标 转化 为 格子 ， 还 需要 写 一 个 取 属 性 值 的 函数 来 返回 对 应 位 置 的 属性 值 。 
添加 一 个 成 员 变 量 来 保存 “meta” 层 ， 然 后 添加 转换 函数 worldToTile 和 getValue， 如 代码 清单 7-11 所 示 。 


代码 清单 7-11 读 取 属 性 值 





// 声 明 

cocos2d: :TMXLayer* m build; 

cocos2d::Point worldToTile(cocos2d::Point& point); 

std::string getValue (std::string key,cocos2d::Point& posInGL, cocos2d:: TMXLayer* layer, cocos2d: :TMXTiledMap* map ); 
// 实 现 

Point HelloWorld::worldToTile( Point& point ) 

{ 


int x = point.x / m tileMap->getTileSize() .width; 
int y = ( m tileMap->getContentSize() .height - point.y)/m_tileMap-> getTileSize() .height; 
return Point (x,y); 


} 
std::string HelloWorld: :getValue( std::string key,Pointg& posInGL,TMXLayer* layer, 


TMXTiledMap* map ) 


Point pos = worldToTile (posInGL) ; 
int tileGID = layer->getTileGIDAt (pos) ; 
if (tileGID) 
{ 
Value pro = map->getPropertiesForGID (tileGID) ; 
auto map = pro.asValueMap () 7 
auto pos = map. find (key); 
if (pos != map.end()) { 
return pos->second.asString(); 


else{ 
return ""; 
} 

} 


else 


{ 
} 
} 
// 调 用 init 中 
m build = m tileMap->getLayer ("meta"); 
m_build->setVisible (false); 


return 

















通过 调用 函数 getTileGIDAt 可 以 获取 某 一 位 置 上 的 GID， 再 调用 getPropertiesForGID 即 可 取得 属性 信息 。 

















取 到 的 属性 是 一 个 Value 类 型 ， 它 内 部 是 一 个 任意 类 型 的 存储 结构 ， 有 些 像 Boost 中 的 any 类 




















型 ， 这 里 我 们 要 取 的 是 一 个 map， 





因此 调 








asValueMap 进 行 类 型 转换 。 最 后 使 








744 创建 塔 





Key 取 到 需要 的 值 。 








在 获取 了 瓦 片 地 图 中 的 信息 后 ， 我 们 实现 createTower 函 数 来 创建 塔 ， 如 代码 清单 7-12 所 示 。 

















代码 清单 7-12 创建 塔 


// 声 明 

void createTower(cocos2d::Point touchPos) ; 

// 实 现 

void HelloWorld: :createTower( Point touchPos ) 

{ 
std::string str = getValue("Build",touchPos,m build,m tileMap) ; 
int offsetX = - (int)touchPos.x % M T: 

m tileMap->getTileSize () .width/2; 


int offsetY = - (int)touchPos.y % (int)m tileMap->getTileSize () .height + 


m tileMap->getTileSize () .height/2; 


(int)m tileMap->getTileSize().width + 


auto blockCenter = Point ( (int) (touchPos.x+offsetX), (int) (touchPos.y+offsetyY) ) 7 


if (str.size() != 0) 
CCLOG ("answer:%s", str.c_str())7 
if (str.compare ("True") == 0) 
{ 
Sprite* tower = Sprite: :create ("Tower.png") ; 
tower->setPosition (blockCenter) ; 
this->addChild (tower, 2) ; 
return; 
} 
} 
Sprite* errorPos = Sprite: :create("ErrorPos.png") ; 
errorPos->setPosition (blockCenter) ; 
this—>addChild(errorPos, 2) ; 


auto action = Sequence: :create (FadeOut: :create (3), CallFunc: :create ([=] { 


errorPos->removeFromParent () ; 
}) , NULL) ; 
errorPos->runAction (action); 
return ; 


























防御 塔 的 位 置 ， 需 要 计算 一 个 偏 移 量 来 保证 创建 的 防御 塔 位 于 格子 的 中 心 。 








的 图 标 。 








7.5 ”制作 而 撞 组 件 





炮塔 已 经 就 绪 ， 接 下 来 要 发 炮 射 击 怪物 。 为 了 避免 过 度 依赖 物理 引擎 ， 这 次 我 们 不 使 

















调用 getValue 函 数 取得 点 击 位 置 的 属性 值 ， 如 果 这 个 值 是 “True”， 就 创建 一 个 防御 塔 。 反 之 ,创建 一 个 错误 标志 ， 在 3 秒 之 后 渐 隐 消失 。 渐 隐 效 果 是 一 个 Action， 可 以 参考 TestCpp 来 学 习 。 要 创建 




















将 光盘 中 “Chapter 7/towerResource” 下 的 Tower.png 和 ErrorPos.png 复 制 到 Resources 目 录 下 。 编 译 运行 程序 ， 当 点 击 设置 的 可 放置 区 域 时 ， 能 够 产生 防御 塔 ， 当 点 击 非法 位 置 时 ， 显 示 不 可 放 











Physics 系 统 来 判断 碰撞 ， 而 直接 在 代码 中 编写 一 个 碰撞 判断 模块 。 碰 撞 的 处 理 在 7.6 节 中 实现 ， 在 这 一 节 中 我 们 

















来 确定 处 理 的 流程 并 完成 炮弹 组 件 、 防 御 塔 组 件 、 血 量 组 件 的 制作 。 血 量 显示 如 图 7-16 所 示 。 



































ageges: 
-9 ay 


1 
g 
~~ 








7-16 血 条 显示 效果 











7.5.1 整体 设计 


动手 之 前 ， 我 们 先 构 思 一 下 这 个 模块 的 功能 : 当 怪物 进入 到 防御 塔 的 射程 之 内 ， 防 御 塔 要 发 出 炮弹 ; 当 炮 弹 磁 到 怪物 时 ， 要 对 怪物 产生 伤害 。 要 完成 这 两 个 功能 ， 模 块 中 至 少 要 有 三 个 结构 来 保存 所 有 
的 防御 塔 、 炮 弹 、 怪 物 等 信息 。 由 于 经 常会 有 添加 删除 ， 数 据 结构 应 该 使 用 list， 成 员 类 型 可 以 选择 节点 或 精灵 。 但 仔细 想 一 想 ， 会 发 现 这 些 属性 都 可 以 被 抽象 到 组 件 中 ， 因 此 我 们 只 储存 组 件 即 可 。 


下 面 先 来 创建 一 个 炮弹 组 件 来 处 理 炮弹 的 行为 。 
7.5.2 ”编辑 炮弹 组 件 
在 Components 文 件 夹 中 添加 “ComBullet.h” 和 “ComBullet.cpp” 两 个 文件 。 在 头 文件 中 编辑 的 代码 如 代码 清单 7-13 所 示 。 


代码 清单 7-13 ”定义 炮弹 组 件 





//ComBullet.h 

#ifndef testTower_ComBullet_h 

#define testTower_ComBullet_h 

#include "cocos2d.h" 

class ComBullet : public cocos2d::Component 


{ 
public: 
static ComBullet* create(float fireDamage, float speed) ; 
virtual void onEnter() override; 
float setSpeedXY (cocos2d::Point org, cocos2d::Point des); 
CC_SYNTHESIZE_ READONLY (float,m_speedX, SpeedX) 
CC_SYNTHESIZE READONLY (float,m_speedY, SpeedY) 
CC_SYNTHESIZE_ READONLY (float,m_fireDamage, FireDamage) 
protected: 
ComBullet (float fireDamage, float speed); 
private: 
float m_speed; 


J; 
#endif 
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度 在 x 轴 和 y 轴 的 分 量 ， 返 回 的 是 旋转 的 角度 值 。 我 们 也 可 以 看 到 在 这 个 头 文件 中 使 用 了 "CC SYNTHESIZE READONLY” 这 个 宏 ， 它 的 作用 是 声明 一 个 内 部 变量 并 实现 一 个 读 取 的 方法 ， 算 是 一 个 语法 糖 。 





定义 好 了 头 文件 ， 我 们 再 来 写实 现 ， 如 代码 清单 7-14 所 示 。 


代码 清单 7-14 ”实现 炮弹 组 件 





//ComBullet .cpp 

#include "ComBullet.h" 

using namespace cocos2d; 

ComBullet: :ComBullet (float fireDamage, float speed) 


setName ("ComBullet") ; 
m_fireDamage = fireDamage; 
m_speed = speed; 


} 
ComBullet* ComBullet: :Create (float fireDamage, float speed) 


ComBullet * ret = new ComBullet (fireDamage, speed) ; 


if (ret != nullptr && ret->init()) 
{ 
ret->autorelease () ; 


} 


else 


CC_SAFE_DELETE (ret) 7 
} 
return ret; 
} 
void ComBullet: :onEnter () 
{ 


} 
float ComBullet: :setSpeedXY (Point org,Point des) 
{ 
Point diff 
float dis 


= des-org; 

diff.getLength (); 

float sinx = diff.x / dis; 

float cosx = diff.y / dis; 

m_speedX = m_speed*sinx; 

m_speedY = m_speed*cosx; 

float angleRadians atanf(diff.x / diff. 
float angleDegrees 
if (angleDegrees <0 ) 


= y); 
angleDegrees =-1* angleDegrees; 


} 
if (diff.y <0) { 


angleDegrees = 180 - angleDegrees; 
} 
if (diff.x <0) 
{ 

angleDegrees = -1 * angleDegrees; 


} 


return angleDegrees; 


CC_RADIANS_TO_DEGREES (angleRadians) ; 








回 


编辑 完成 后 ， 不 要 忘记 在 “Constants.h” 中 添加 下 











的 代码 ， 实 现 扩充 组 件 的 包含 头 文件 : 





#include "ComBullet.h" 


7.5.3 ”防御 塔 组 件 


相对 于 炮弹 组 件 ， 防 御 塔 组 件 要 简单 许多 。 以 同样 的 方式 添加 一 个 名 为 “ComTower” 的 类 ， 如 代码 清单 7-15 所 示 。 


代码 清单 7-15 ”实现 防御 塔 组 件 


//ComTower.h 

#ifndef testTower ComTower h 

#define testTower ComTower h 

#include "cocos2d.h" 

class ComTower: public cocos2d: :Component 

{ 

public: 
static ComTower* create (); 
virtual void onEnter() override; 
CC_SYNTHESIZE (bool,m_isFiring, IsFire) ; 
CC_PROPERTY READONLY (int, m_range, Range); 
CC SYNTHESIZE READONLY (float, m_reloadTime, 

protected: 
ComTower () ; 

ti 

#endif 

//ComTower . cpp 

#include "ComTower.h" 

using namespace cocos2d; 

ComTower: : ComTower () 

:m_isFiring (false) 

{ 
setName ("ComTower") 7 

} 

ComTower* ComTower: :Create () 


{ 


ComTower * ret new ComTower () 7 
if (ret != nullptr && ret->init()) 
{ 

ret->autorelease () ; 
} 


else 


CC_SAFE DELETE (ret); 
a ret; 
eid ComTower: :onEnter () 
l m_range = 100; 
m_reloadTime =0.3; 
m ComTower: :getRange () const 
l return m range; 


i 








这 里 我 们 








7.5.4” 血 量 组 件 


怪物 一 下 子 就 被 击败 也 挺 无 趣 的 ， 





代码 清单 7-16 ”定义 血 量 组 件 


因此 创建 一 个 怪物 血 量 的 组 件 ， 记 录 怪 物 的 生命 值 ， 


ReloadTime) ; 





参数 记录 了 防御 塔 是 否 处 于 正在 开火 的 状态 、 攻 击 半径 以 及 攻击 间隔 。 











//ComLife.h 
#ifndef Tower ComLife h 
#define Tower ComLife h 
#include "cocos2d.h" — 
#include "ui/CocosGUI.h" 
class ComLife: public cocos2d::Component 
{ 
public: 
static ComLife* create(int maxLife); 
virtual void onEnter() override; 
bool attacked(int damage) ; 
protected: 
ComLife (int maxLife) ; 
private: 


并 让 怪物 头 上 出 现 一 个 血 条 ， 当 血 减 为 0 时 ， 怪 物 才 被 击败 。 定 义 一 个 名 为 ComLife 的 组 件 ， 如 代码 清单 7-16 所 


cocos2d: :ui::LoadingBar* m_hpBar; 
float m_maxLife; 
float m_currentHp; 

ti 

#endif 





我 们 在 创建 组 件 时 ， 传 入 一 个 最 大 血 量 ， 将 其 储存 为 成 员 变 量 。 
提示 血 量 组 件 中 使 用 到 了 出 库 ， 如 果 出 现 未 找到 文件 的 错误 
我 们 来 看 一 下 血 量 组 件 实现 ， 如 代码 清单 7-17 所 示 。 


代码 清单 7-17 ”实现 血 量 组 件 











添加 一 个 成 员 函 数 attacked， 当 怪物 被 攻击 时 ， 调 


需要 添加 库 依赖 和 文件 包含 路 径 。 








这 个 函数 ， 如 果 被 攻击 后 血 值 为 0， 返 回 true。 





//ComLife.cpp 
#include "ComLife.h" 
using namespace cocos2d; 
ComLife::ComLife (int maxLife) 
:m_currentHp (0) ,m_hpBar (nullptr) 
{ 
setName ("ComLife") ; 
m maxLife = maxLife; 
m_currentHp = maxLife; 
} 
ComLife* ComLife::create (int maxLife) 
{ 
ComLife * ret = new ComLife(maxLife) ; 
if (ret != nullptr && ret->init()) 
{ 
ret->autorelease () ; 
} 


else 


CC_SAFE_DELETE (ret) ; 
} 


return ret; 


} 

void ComLife::onEnter () 

{ 
auto owner = getOwner (); 
m_hpBar = ui::LoadingBar: :create(); 
m_hpBar->loadTexture ("Life.png") ; 
m_hpBar->setPercent (100) ; 
auto loadBarBk = Sprite: :create ("LifeBk.png") ; 
auto bar = Node: :create(); 
bar->addChild (loadBarBk) ; 
bar->addChild(m_hpBar) ; 
Size spriteSize = owner->getContentSize () 7 


bar->setScale( spriteSize.width/ m_hpBar->getContentSize() .width ); 
bar->setPosition (Point (spriteSize.width/2, spriteSize.height) ); 


owner->addChild (bar) ; 
} 
bool ComLife::attacked(int damage) 


{ 
bool dead = false; 
int after = m_currentHp - damage; 
if (after>0) 


{ 


m_currentHp = after; 


m_hpBar->setPercent ( m_currentHp f m maxLife *100); 


} 


else 


dead = true; 


} 


return dead; 











我 们 看 到 ， 这 里 血 条 使 








的 是 名 为 LoadBar 的 ui 进度 条 控件 。LoadBarl 类 的 成 员 函 数 setPercent 可 以 设置 血 条 的 变化 。 
我 们 也 需要 将 光盘 中 “Chapter 7/towerResource” 下 的 Life.png 和 LifeBk.png 复 制 到 Resources 目 录 下 。 


最 后 在 makeMonster 函 数 中 加 入 组 件 的 创建 与 挂 载 即 可 ， 如 代码 清单 7-18 所 示 。 


代码 清单 7-18 ”创建 与 挂 载 血 量 控件 


void HelloWorld: :makeMonster (float dt) 
{ 


auto comMove = ComMove::create (m pathVec); 
monster->addComponent (comMove) ; 

auto comLife = ComLife::create (30); 
monster->addComponent (comLife) ; 

addChild (monster, 2); 

comMove->startMove () 7 











由 于 LoadBar 自 身 没 有 背景 ， 因 此 我 们 需要 创建 一 个 Sprite 作 为 它 的 背景 。 





编译 运行 ， 即 可 看 到 怪物 头 上 出 现 血 条 了 。 


7.6 ”碰撞 模块 


上 一 节 编写 好 了 炮弹 、 防 御 塔 的 模块 ， 接 下 来 我 们 就 开始 编写 碰撞 系统 。 为 了 方便 ， 我 们 创建 一 个 继承 自 Layer 的 类 。 这 样 不 但 可 以 使 








化 了 代码 ， 效 果 如 图 7-17 所 示 。 


























Layer 的 内 存 管理 机 制 ， 也 可 以 在 Layer 当 中 使 
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图 7-17 ”碰撞 效果 


在 Class 目 录 中 新 建 FireManager.h 和 FireManager.cpp 两 个 文件 。 在 这 两 个 文件 中 创建 一 个 名 为 FireManager 的 类 来 管理 炮弹 的 移动 和 碰撞 。 编 辑 头 文件 FireManager.h 如 代码 清单 7-19 所 示 。 


代码 清单 7-19 ”定义 控制 模块 





//FireManager.h 
#include "Components/Constants.h" 
USING_NS_CC; 
class FireManager 
:public Layer 
{ 
public: 
CREATE_FUNC (FireManager) ; 
virtual bool init(); 
void moveBullet (float dt); 
public: 
std::list<ComBullet*> m_bullets; 
std::list<ComTower*> m_towers; 
std::list<ComMove*> m monster; 





Fr 





除了 声明 三 个 存放 组 件 的 容器 ， 还 声明 了 一 个 移动 子弹 的 函数 ， 在 每 一 帧 调用 它 。 接 下 来 ， 我 们 来 实现 控制 模块 ， 如 代码 清单 7-20 所 示 。 


代码 清单 7-20 ”实现 控制 模块 





//FireManager.cpp 

#include "FireManager.h" 

bool FireManager::init() 

{ 
if (!CCLayer::init()) 
{ 


return false; 
} 
this->schedule (schedule_selector (FireManager: :moveBullet) ) ; 
return true; 


void FireManager: :moveBullet( float dt ) 
{ 
Size winSize = Director: :getInstance ()->getWinSize (); 
bool hitMonster = false; 
//pullets 
for (auto bullet:m bullets) 
{ 
hitMonster = false; 
auto owner = bullet->getOwner () ; 
Point realPos = Point (bullet—>getSpeedx () +owner->getPositionx(), 
bullet—>getSpeedY () towner->getPositionyY ()); 
for (auto monster: m_monster) 
{ 
auto distance = realPos.getDistance (monster->getOwner () ->getPosition()); 
if (distance < monster->getOwner () ->getContentSize() .width/2) 
{ 
auto comLife = dynamic_cast<ComLife*> (monster->getOwner ()-> 
getComponent ("ComLife") ) 7 
bool isDead = comLife->attacked (bullet-—>getFireDamage () ) 7 
hitMonster = true; 
if (isDead) 


break; 
} 
} 
if (hitMonster||winSize.width < realPos.x || winSize.height <realPos.y 
|| 0 > realPos.x || O>realPos.y) 


//tower 


{ 


hitMonster = true; 
monster->getOwner () ->removeFromParent () ; 
m_monster. remove (monster) ; 


owner->removeFromParent () ; 
m_bullets. remove (bullet) ; 
break; 


owner->setPosition (realPos) ; 


for (auto tower:m_towers) 


{ 


auto owner = i 
if (tower->getIsFire ()) 


else 


tower->getOwner () 


continue; 


int fireRange = tower->getRange(); 
Point towerPos = tower-—>getOwner () ->getPosition (); 


for (auto monster:m_monster) 


{ 


if (towerPos.getDistance (monster->getOwner () ->getPosition())<= fireRange) 


{ 
Sprite* bullet = Sprite: :Create ("Bullet.png") ; 
bullet—>setPosition (owner->getPosition()); 
auto comBullet = ComBullet::create(30, 10); 
bullet->CComponent (comBullet) ; 
m_bullets.push_back (comBullet) ; 
float angle = comBullet->setSpeedxyY (owner->getPosition(), 
monster->getOwner () ->getPosition()); 
owner->getParent () ->addChild (bullet, 2); 


tower->setIsFire (true); 
runAction (Sequence: : create ( 


DelayTime: : create (tower->getReloadTime()), 


CallFunc: :create ( [=] { 
tower->setIsFire (false); 

hoy 

nullptr)); 
bullet—>setRotation (angle) ; 
owner->setRotation (angle) ; 

break; 
} 





下 。 


moveBullet 函 数 的 核心 有 两 个 循环 ， 一 个 是 炮弹 检测 是 否 击 中 目标 ， 一 个 是 防御 塔 检测 是 否 有 怪物 进入 攻击 


7.6.2 ”调用 模块 











7G} 


围 ， 细 看 一 下 都 不 难 理解 。 由 于 要 创建 子弹 ， 我 们 要 把 Bullet.png 复 制 到 Resources 目 录 








最 后 就 是 将 这 个 模块 引入 到 调用 中 。 首 先 我 们 添加 一 个 类 成 员 ， 并 且 在 初始 化 时 将 其 创建 。 然 后 找到 创建 怪物 和 创建 防御 塔 的 位 置 ， 将 组 件 加 载 到 模块 中 。 如 代码 清单 7-21 所 示 。 











代码 清单 7-21 ”创建 模块 





// 声 明 ， 在 头 文件 中 
#include "FireManager.h" 
private: 
FireManager* m_fireManager; 
// 创 建 ， 在 init 函 数 中 
m fireManager = FireManager::create(); 
addChild(m_fireManager) ; 





创建 好 模块 后 ， 找 到 创建 防御 塔 和 创建 怪物 的 位 置 ， 将 组 件 加 载 到 管理 





模块 中 ， 代 码 如 下 : 








// 为 防御 塔 添加 组 件 
void HelloWorld: :createTower( Point touchPos ) 
{ 





Sprite* tower = Sprite::create("Tower.png") ; 
tower->set Position (blockCenter) ; 

auto comTower = ComTower::create(); 
tower->addComponent (comTower) ; 
m_fireManager->m_towers.push_ back (comTower) ; 
this->addChild (tower, 2); = 


j sein 
// 为 怪物 添加 组 件 
void HelloWorld: :makeMonster (float dt) 
{ 
auto monster =Sprite::create("Monster.png") ; 
auto path = m_pathVec; 


if (path.size() == 0) 
{ 


return ; 
} 
auto comMove = ComMove: :create (m \ pathVec) . 
monster->addComponent (comMove) ; 
m_fireManager->m_monster.push_back (comMove) ; 
addChild (monster, 2) 7 
comMove->startMove () ; 








添加 好 后 ， 编 译 运行 ， 当 怪物 进入 防御 塔 的 范围 即 可 被 攻击 。 














最 后 ， 我 们 再 添加 一 个 函数 ， 以 一 定 频率 调用 makeMonster， 让 怪物 一 波 一 波 地 产 旨 





EE， 代码 如 下 : 





// 定 义 Helloworld.h 
void createWaveRusher () ; 
private: 

int m_curRound; 

int m monsterCreateLeft; 
// 调 用 ， 在 init 中 
//makeMonster (0) ; 
m_curRound = 1; 
createWaveRusher () ; 
// 实 现 


void HelloWorld: :createWaveRusher () 


m_monsterCreateLeft = 10 + m_curRound*3; 
this->schedule (schedule_selector (HelloWorld: :makeMonster), 0.5); 


} 
// 在 makeMonster 末尾 添加 
void HelloWorld: :makeMonster (float dt) 
{ 
auto monster =Sprite: :create ("Monster.png"); 
auto path = m pathVec; 
if (path.size() == 0) 
{ 
return 7 
} 
auto comMove = ComMove::create (m_pathVec) ; 
monster->addComponent (comMove) ; 
auto comLife = ComLife::create(30*m curRound) ; 
m fireManager->m_monster.push back (comMove) ; 
monster->addComponent (comLife) ; 
addChild (monster, 2) ; 
comMove->startMove () 7 
m_monsterCreateLeft--; 
if (m_monsterCreateLeft == 0) { 
unschedule (schedule selector (HelloWorld: :makeMonster) ) ; 
runAction (Sequence: :create (DelayTime: :create (3+m_curRound), CallFunc::create([=] () { 
m_curRound++; 
createWaveRusher () ; 
}),nullptr)); 


编译 运行 ， 即 可 看 到 怪物 以 每 隔 0.5 秒 产生 一 个 ， 每 一 波 增加 三 个 的 速率 产生 。 


T NE 




















这 一 章 我 们 熟悉 了 瓦 片 地 图 的 概念 ， 学 习 了 如 何 使 用 它 制作 一 个 关卡 ， 掌 握 了 如 何 面向 组 件 编程 ， 并 根据 之 前 游戏 的 经 验 ， 将 塔 防 游戏 的 功能 点 组 件 化 ， 最 后 了 解 了 如 何不 依靠 物理 引擎 ， 自 己 做 碰撞 
检测 。 在 下 一 章 中 ， 我 们 将 看 到 如 何 使 用 骨骼 动画 制作 动作 ， 了 解 九宫 格拉 挤 等 知识 。 























第 8 章 塔 防 (F) 


文 虎 要 离职 。 当 大 家 从 朝 朝 口中 听 到 这 个 消息 时 ， 文 彪 已 经 找 好 了 下 家 ， 开 始 走 离 职 流程 了 。 像 马云 所 说 ， 离 职 的 原因 无 非 两 条 : 或 是 钱 给 少 了 ， 或 是 心 委 届 了 。 
他 离职 的 原因 大 家 都 清楚 ， 也 没 必要 八卦 。 晚 上 下 班 ， 一 起 在 文 肛 家 吃 测 羊肉 ， 算 是 庆祝 他 脱离 苦海 。 

酒 过 三 巡 ， LHRH: “我 虽然 离职 了 ， 却 还 是 咱们 一 分 子 。 过 两 天 我 搬 到 新 公司 附近 住 了 ， 但 这 并 不 妨碍 我 参加 咱们 活动 ， 一 起 看 电影 还 要 叫 我 啊 。” 
SK 接 过 话 头 ， 说 道 : “一 定 一 定 ， 就 怕 到 时 候 ， 你 早已 出 任 公司 CEO ， 迎 娶 白 富美 ， 走 向 人 生 若 峰 ， 不 适合 一 起 看 电影 啦 。” 

大 家 哄笑 着 喝 着 酒 。 文 彪 未 来 出 任 CEO 或 许 有 些 唤 远 ， 不 过 后 来 ， 他 报名 参加 了 华尔街 学 英语 ， 又 报名 菜 大 学 成 人 自考 硕士 ， 确 实 真 就 没 在 一 起 看 过 电影 了 。 


“关于 你 那个 小 女友 的 事 ”， 文 漠 看 着 一 头 雾 水 的 劲松 说 ，“ 就 是 那个 源 啊 ， 今 天 我 给 她 讲 了 个 两 个 小 伙 子 暗恋 班 花 的 俗套 故事 。 不 过 ， 我 有 其 中 一 个 小 伙 的 QQ 号 ， 所 以 ， 故 事 很 烂 却 也 算 真 实 。 又 和 
她 扯 了 些 有 的 没 的 ， 就 把 你 QQ 给 她 了 。 兄 弟 也 就 帮 到 这 了 。” 


“可 以 啊 ， 干 得 漂亮 ”， 朝 朝 兴 奋 地 说 道 ，“ 我 看 有 戏 ”。 

萌 神 拍 着 肚子 问 道 : “我 怎么 没 看 出 来 ? 你 就 喜欢 捕 风 提 影 。” 

“你 听 ， 我 给 你 分 析 啊 。 劲 松 这 么 帅 ， 又 是 大 长 腿 ， 性 取向 没 问题 ， 你 不 觉得 他 没 女 朋友 很 奇怪 么 ” ” 朝 朝 侃侃 分 析 道 ，“ 所 以 一 定 是 有 心 结 啦 ， 我 看 八成 就 是 这 个 源 了 。” 

SK 打 含 道 : “ 恩 ， 我 看 就 是 源 ， 不 过 不 是 这 个 源 ， 应 该 是 程序 员 的 员 ”。 

“你 们 太 八 卦 了 ”， 一 直 没 说 话 的 劲松 说 道 ，“ 谢 谢 文 彪 的 美意 ， 所 谓 识 天 易 逆 天 难 ， 缘 起 缘 灭 自 有 定数 ， 在 意 它 干 嘛 ， 反 而 挠 了 兴致 ， 所 谓 襄 羊 宰 牛 且 为 乐 ， 会 须 一 饮 三 百 杯 。” 
“说 得 好 ，” 众 人 道 ，“ 呼 儿 将 出 换 美 酒 ， 与 尔 同 销 万 古 息 ”。 

晚上 散 席 后 ， 劲 松 打开 电脑 ， 发 现 竟 有 一 个 好 友 邀 请 ， 描 述 到 : “你 相信 缘分 吗 ? ” 


时 间 走 过 ， 留 在 人 生 海 岸上 的 都 是 珠宝 珍奇 。 最 美的 青春 ， 怎 样 这 歌 都 显 苍 白 。 谨 以 这 一 段 段 小 故事 ， 记 录 那 段 有 我 们 的 岁月 。 有 笑 有 泪 ， 有 仿 香 ， 有 希望 ， 如 有 雷同 ， 与 君 共 锡 。 


8.1 细 化 怪物 











紧 接 第 7 章 ， 塔 防 游戏 已 经 能 够 运行 ， 但 工作 还 远 没有 结束 。 单 说 怪物 ， 它 只 是 一 张 静 态 的 图 片 ， 表 现 力 很 差 。 在 空战 游戏 中 ， 解 决 这 种 情况 的 方式 是 使 用 序列 帧 动画 。 但 序列 帧 动画 有 一 个 缺点 ， 那 就 
是 它 必须 使 用 很 多 张 图片 ， 这 会 使 程序 消耗 的 内 存 增加 。 在 这 一 节 中 我 们 将 介绍 骨骼 动画 作为 序列 帧 的 替代 方法 。 效 果 如 图 8-1 所 示 。 
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图 8-1 使 用 骨骼 动画 的 怪物 


8.1.1 ”骨骼 动画 


骨骼 动画 是 指 将 图 片 绑 定 到 骨骼 上 ， 通 过 操作 骨骼 来 实现 的 动画 。 通 俗 地 齐 ， 有 点 像 皮 影 戏 。 图 片 分 成 一 块 一 块 的， 然后 拼接 到 一 起 。 需 要 记录 的 信息 是 骨头 的 相应 动作 ， 程 序 处 理 骨头 的 动作 ， 效 果 
就 反映 到 绑 定 的 图 片上 。 











使 用 CocoStudio 中 的 动画 编辑 器 ， 可 以 很 方便 地 编辑 骨骼 动画 。 打 开 第 7 章 创 建 的 Tower 场 景 项 目 ， 然 后 点 击 “文件 ”一 “新 建 项 目 ” 一 “新 建 动画 项 目 ”， 在 弹出 的 对 话 框 中 ， 将 项 目 名 更 改 为 
Monster。 将 光盘 文件 “Chapter 8/monster” 中 monster_1.png 至 monster 4.png 这 四 张 怪物 的 图 片 添 加 到 assets 目 录 中 ， 双 击 Monster.xml.animation， 启 动 动画 编辑 项 目 。 





在 启动 项 目 后 ， 点 击 上 方 工具 栏 中 的 “创建 骨骼 ”， 使 用 的 快捷 键 是 “Alt+K”， 进 入 骨骼 编辑 模式 。 


点 击 工作 区 会 出 现 一 个 十 字 星 ， 这 样 就 创建 了 一 个 骨骼 。 同 时 在 对 象 结构 选项 卡 中 也 新 加 入 了 一 个 层 。 点 击 拖 动 可 以 创建 另 一 种 骨骼 ， 它 是 一 个 尖 刺 的 形状 ， 通 常用 来 制作 弧 形 移动 。 再 次 点 击 工具 栏 
中 的 “创建 骨骼 ”可 以 切换 回 摆 放 模式 。 





了 解 了 基本 的 操作 后 ， 我 们 来 动手 创建 骨骼 。 首 先 将 怪物 的 眼睛 、 耳 杀 、 身 体 从 资源 中 拖 动 到 工作 





Kl 


中 。 





然后 需要 创建 四 个 骨骼 ， 一 个 星 型 的 ， 用 于 绑 定 身体 ， 三 个 是 刺 型 的 ， 分 别 用 于 绑 定 身体 和 了 眼睛。 创建 好 后 ， 将 骨骼 摆 放 到 恰当 的 位 置 。 





接 下 来 ， 我 们 来 绑 定 骨骼 。 在 图 片上 右 击 ， 在 弹出 的 下 拉 菜单 中 选择 “ 绑 定 到 骨头 ”。 在 移动 鼠标 到 骨骼 上 时 ， 骨 骼 会 高 亮 显示 ， 点 击 对 应 骨头 ， 若 工作 区 左上 角 出 现 “Binding Success", WAFA 
定 成 功 ， 同 时 对 象 结构 中 相应 的 层 也 进行 了 合并 。 重 复 这 个 操作 ， 将 所 有 的 图 片 都 绑 定 到 骨骼 上 ， 就 完成 了 骨骼 的 绑 定 部 分 。 











更 改 对 象 结构 中 层 的 名 称 ， 分 别 为 Eye、LeftEar、RightEar、Main。 最 后 我 们 来 编辑 一 下 骨骼 之 间 的 关系 。 分 别 在 前 三 个 骨骼 上 右 击 ， 选 择 “ 绑 定 到 父 关 系 ”， 然 后 再 分 别 点 击 “Main” 骨 骼 。 点 击 
上 方 工具 栏 中 的 “查看 骨骼 关系 ”， 可 以 进行 查看 ,编辑 好 的 骨骼 如 图 8-2 所 示 。 





LeftEar 
RightEar 


Eye 























点 击 左上 角 工 具 栏 中 的 “形体 模式 ”， 可 将 工作 区 切换 为 “动画 模式 ”。 在 切换 工作 区 后 ， 我 们 开始 编辑 动画 。 
































首先 ， 我 们 双击 “动作 列表 ”选项 卡 中 的 默认 动画 ， 将 其 更 名 为 Walk。 在 动画 帧 选项 卡 中 分 别 选择 Eye、RightEar、LeftEar、Main 四 个 上 骨骼， 点击“ 鼠标 位 置 ”文字 前 方 的 
击 动画 帧 选项 卡 中 的 标尺 ， 将 当前 帧 移动 到 第 30 帧 处 ， 依 照 同样 的 办 法 插入 关键 帧 ， 这 帧 是 用 来 恢复 状态 的 。 











图 标 插入 关键 帧 。 然 后 点 





移动 当前 帧 移动 到 第 15 帧 处 ， 点 击 LeftEar 骨 骼 ， 再 点 选 工具 栏 中 的 “旋转 ”， 使 用 快捷 键 “Alt+A” 将 其 旋转 一 个 角 
(0.9, 0.9) 。 点 击 选择 Main 骨 骼 ， 将 其 旋转 一 个 角度 。 





度 。 采 用 同样 的 方法 调整 RightEar。 点 击 Eye 骨 骼 ， 在 第 15 帧 处 ， 将 其 缩放 更 改 为 





更 改 “ 动 画 帧 ”标签 卡 下 的 “播放 速率 ”为 “30 帧 / 秒 ”， 点 击 播放 观看 编辑 的 效果 ， 如 图 8-3 所 示 。 
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8-3 ”编辑 动画 











制作 完成 后 保存 项 目 ， 使 用 默认 选项 将 其 导出 ， 复 制导 出 的 资源 到 程序 的 Resources 目 录 中 。 





加 载 骨骼 动画 方式 与 先前 加 载 帧 动画 完全 一 样 ， 我 们 首先 在 init 函 数 中 增加 导出 动画 的 初始 化 ， 然 后 更 改 makeMonster 函 数 ， 如 代码 清单 8-1 所 示 。 


代码 清单 8-1 ”加 载 动画 





// 在 init 中 添加 
ArmatureDataManager: :getInstance () ->addArmatureFileInfo ("publish/Monster.ExportJson") ; 
void HelloWorld: :makeMonster (float dt) 
{ 
//aato monster =CCSprite: :create ("Monster.png") ; 
auto monster = Node: :create(); 
auto monterArmature = cocostudio: :Armature: :create ("Monster"); 
monster->setContentSize (monterArmature->getContentSize ()); 
auto path = m_pathVec; 
if (path.size() == 0) 


return ; 
} 
auto comMove = ComMove: :create (m pathVec); 
monster->addComponent (comMove) ; 
auto comLife = ComLife::create (30*m_curRound) ; 
m_fireManager->m_monster.push_back (comMove) ; 
monster->addComponent (comLife) ; 
monster->addChild (monterArmature) ; 
monterArmature->getAnimation ()->play ("Walk"); 
addChild (monster, 2) ; 
comMove->startMove () 7 
m_monsterCreateLeft--; 


if (m_monsterCreateLeft == 0) { 
unschedule (schedule_selector (HelloWorld: :makeMonster) ) ; 
runAction (Sequence: :create (DelayTime: :Create (3+m_curRound), CallFunc::create([=] () { 
m_curRound++; 
createWaveRusher () ; 
}),nullptr)); 


} 


} 

// 在 ComLife.cpp 文 件 中 更 改 血 条 位 置 

void ComLife::onEnter () 

{ 
auto owner = getOwner(); 
m hpBar = ui::LoadingBar: :create(); 
m_hpBar->loadTexture ("Life.png") ; 
m_hpBar->setPercent (100) ; 
auto loadBarBk = Sprite: :create ("LifeBk.png") ; 
auto bar = Node: :create(); 
bar->addChild (loadBarBk) ; 
bar->addChild (m_hpBar) ; 
Size spriteSize = owner->getContentSize (); 
bar->setScale( spriteSize.width/ m_hpBar->getContentSize() .width /2); 
bar->setPosition (Point (0, spriteSize.height/2-2) ); 
owner->addChild (bar) ; 





上 面 代码 完成 了 创建 动画 对 象 ， 也 实现 了 播放 编辑 的 动画 。 由 于 更 改 了 怪物 的 大 小 ， 因 此 还 需要 更 改 ComLife 中 血 条 的 位 置 。 





编译 运行 ， 即 可 看 到 小 怪物 摇 摇 哆 晃 地 走 起 来 了 。 











现在 这 个 游戏 是 可 以 随便 造 塔 的 ， 没 什么 难度 。 实 际 上 ， 造 塔 要 通过 金币 来 限制 ， 而 金币 通过 打 怪 物 获得 。 另 外 ， 当 怪物 走 到 路 径 的 尽头 时 ， 要 更 改 现存 的 血 量 。 接 下 来 我 们 就 分 别 制作 这 些 逻 辑 。 完 








成 后 的 效果 如 图 8-4 所 示 。 
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图 8-4 HUD 显 示 


8.2.1 制作 HUD 


我 们 需要 显示 的 数据 有 : 金币 数 、 生 命 值 、 当 前 是 第 几 拨 怪 物 。 打 开 Cocostudio 中 的 项 目 ， 点 击 “ 文 件 ” 一 “新 建 项 目 ” 一 “新 建 UI 项 目 ”， 将 项 目 命名 为 HUD。 将 光盘 中 “Chapter 8/GUI" FAY 
文件 复制 到 项 目的 assets 文 件 夹 中 。 编 辑 过 程 有 以 下 几 个 地 方 需要 注意 : 





- 更 疏通 布 尺寸 为 060*640。 
“ 金币 、 生 命 等 文字 均 为 图 片 ， 数 字 的 类 型 是 “数字 标签 ”， 对 应 资源 在 光盘 中 “Chapter 8/GUI” 下 可 以 找到 。 
“ 金币 后 面 的 数字 名 称 为 : LabelGold; 波 数 中 间 的 数字 名 称 为 : LabelWave; 生命 后 面 的 数字 名 称 为 : LabelLife。 


编辑 好 后 ， 保 存 导出 ， 将 publish 目 录 复 制 到 项 目的 Resources 目 录 中 。 编 辑 效果 如 图 8-5 所 示 。 
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图 8-5 ”编辑 HUD 
接 下 来 打开 代码 工程 ， 将 载 入 HUD 的 代码 加 入 init 函 数 中 。 更 改 后 的 代码 如 代码 清单 8-2 所 示 。 


代码 清单 8-2 载 入 HUD 





bool HelloWorld: :init() 
{ 


ArmatureDataManager: :get Instance () ->addArmatureFileInfo ("publish/Monster.ExportJson") ; 
auto hud = GUIReader: : get Instance () ->widgetFromJsonFile ("publish/HUD.ExportJson") ; 
hud->setTag (1); 

this->addChild (hud, 3) ; 








先 来 增加 当前 怪物 的 波 数 显 示 。 在 createWaveRusher 中 增加 波 数 显 示 的 更 改 ， 如 代码 清单 8-3 所 示 。 


代码 清单 8-3 ”更 改 波 数 显示 





void HelloWorld: :createWaveRusher () 


m_monsterCreateLeft = 10 + m_curRound*3; 

auto hud = dynamic_cast<ui: :Widget*>(this->getChildByTag (1) ); 

auto waveLabel = dynamic_cast<ui::TextAtlas*> (hud->getChildByName ("LabelWave") ) ; 
char num[32]= {0}; 

sprintf (num, "%d",m_curRound) ; 

waveLabel->setStringValue (num) ; 

this->schedule (schedule_selector (HelloWorld: :makeMonster), 0.5); 





更 改 波 数 显示 只 要 在 每 次 创建 一 波 怪物 时 ， 更 改 显示 的 数字 即 可 。 








接 下 来 我 们 增加 金币 数 ， 即 每 当 怪 物 死 掉 ， 增 加 金币 数量 。 我 们 先 在 HelloWorld 类 中 增加 一 个 成 员 变量 m_gold， 并 且 增 加 一 个 函数 changeGold， 用 来 更 改 金币 的 变化 值 。 在 初始 化 时 ， 将 其 设置 为 
200， 如 代码 清单 8-4 所 示 。 











代码 清单 83-4 ”初始 化 金币 数 





// 声 明 
public: 
void changeGold(int num); 
private: 
int m_gold; 
// 初 始 化 
bool HelloWorld: :init () 
{ 
m_curRound = 1; 
m_gold = 0; 
changeGold (200) ; 
createWaveRusher () ; 
return true; 


} 
// 实 现 
void HelloWorld: :changeGold (int num) 
{ 
auto hud = dynamic_cast<ui: :Widget*>(getChildByTag (1) ); 
auto gold = dynamic cast<ui::TextAtlas*> (hud->getChildByName ("LabelGold") ) ; 
char numStr[32]= {0}; 
m goldt=num; 
sprintf (numStr, "sd",m gold); 
gold->setStringValue (numStr) ; 











在 init 函 数 中 ， 需 要 将 createWaveRusher 调 用 移动 到 函数 未 尾 。 然 后 在 ComLife.cpp 中 找到 attacked 函 数 ， 更 改 其 代码 如 代码 清单 8-5 所 示 。 


代码 清单 8-5 TONSA 


可 








bool ComLife::attacked(int damage) 
{ 
bool dead = 
int after = 
if (after>0) 
{ 


false; 
m_currentHp - damage; 


m_currentHp = after; 
m_hpBar->setPercent ( m_currentHp / m_maxLife *100); 
} 
else 
{ 
dead = true; 
auto playground = dynamic_cast<HelloWorld*>(getOwner ()->getParent () ) 7 
playground->changeGold (30) ; 


return dead; 





另外 ， 在 建造 塔 时 需要 扣除 金币 。 更 改 createTower 函 数 ， 增 加 对 当前 金币 量 的 判断 ， 如 代码 清单 8-6 所 示 。 











代码 清单 8-6 ”判断 造 塔 金 


可 








void HelloWorld: :createTower( Point touchPos ) 
{ 


if (str.compare ("True") == 0) 
{ 

if (m_gold < 150) 

{ 
auto goldLabel = dynamic_cast<ui: :Widget*> ( 

getChildByTag (1) ) ->getChildByName ("LabelGold") ; 

auto toRed = TintBy::create(0.2, -127, -255, -127); 
goldLabel->runAction (Sequence: : create (toRed, toRed->reverse(), NULL) ) 
return; 

} 

else 

{ 
changeGold (-150) ; 
Sprite* tower = Sprite: :create ("Tower.png"); 
tower->setPosition (blockCenter) ; 
auto comTower = ComTower::create(); 
tower->addComponent (comTower) ; 
m_fireManager->m_towers.push_back (comTower) ; 
this->addChild (tower, 2); 7 
return; 


} 





我 们 在 能 够 造 塔 时 做 了 判断 : 如 果 当 前 金钱 小 于 塔 的 价格 ， 则 不 能 造 塔 ， 此 时 会 将 当前 金币 数 变 红 ， 以 提示 金币 数 不 足 。 








8.24 tæ 


最 后 ， 我 们 制作 血 量 数据 。 当 怪物 到 达 终 点 时 ， 血 量 会 减少 。 同 金币 一 样 ， 我 们 在 HelloWorld 类 中 添加 一 个 血 量 的 接口 函数 changeLife， 返 回 剩余 的 血 值 ， 如 代码 清单 8-7 所 示 。 








代码 清单 8-7” 血 量 更 改 函数 





// 声 明 
public: 

int changeTowerLife (int num); 
private: 

int m_curTowerLife; 
// 初 始 化 ， 在 init 中 初始 化 金币 信息 下 面 添加 
m_curTowerLife = 0; 
changeTowerLife (10) ; 
// 实 现 
int HelloWorld: :changeTowerLife (int num) 
{ 





auto hud = dynamic_cast<ui: :Widget*>(getChildByTag (1) ); 

auto gold = dynamic_cast<ui::TextAtlas*> (hud->getChildByName ("LabelLife")); 
char numStr[32]= {0}; 

m_curTowerLifet=num; 

sprintf (numStr, "%d",m_curTowerLife) ; 

gold->setStringValue (numStr) ; 

return m_curTowerLife; 

















然后 ， 我 们 更 改 ComMeove.cpp 文 件 ， 在 创建 移动 轨迹 的 动作 最 后 加 入 一 个 减 血 的 调用 即 可 ， 如 代码 清单 8-8 所 示 。 














代码 清单 8-8 减 血 的 调用 





void ComMove: :initPath (std: :Vector<cocos2d: :Point> path) 
{ 
if (path.size() == 0) 

{ 
return 7 

} 

Vector<FiniteTimeAction*> actionsArray; 

m_startPos = path.at (0); 

for (unsigned int i = 1;i<path.size();++i) 

{ 
float duration = path.at(i-1) .getDistance (path.at (i)); 
float time = duration/NORMAL SPEED; 
actionsArray.pushBack (CCMoveTo: :create (time, path.at (i))); 

} 

actionsArray.pushBack (CallFunc: :create ( [=] () { 
auto playground = dynamic cast<HelloWorld*> (getOwner () ->getParent () ) ; 
auto curLife = playground->changeTowerLife (-1) ; 
if (curLife == 0) { 

//end Game 

} 
playground->removeMonster (getOwner () ) 7 

Wye 


m_moveActions = CCSequence: :create (actionsArray) ; 





为 了 安全 地 移 除 走 到 尽头 的 怪物 ， 需 要 将 它们 存 入 一 个 缓冲 结构 再 删除 ， 这 样 可 以 防止 迭代 器 失效 。 在 这 里 我 们 增加 一 个 removeMonster 函 数 ， 如 代码 清单 8-9 所 示 。 


代码 清单 8-9 ” 移 除 怪物 





//HelloWorldScene.h 
public: 

void removeMonster (Node* monster); 
//HelloWorldScene.cpp 
void HelloWorld: :removeMonster (Node* monster) 
{ 

auto comMove = dynamic cast<ComMove*> (monster->getComponent ("ComMove") Fi 

m fireManager->m tmpMonster.push back (comMove) ; 
} 
//FireManager.h 
public: 

std::list<ComMove*> m_tmpMonster; 
//FireManager .cpp 
void FireManager: :moveBullet( float dt ) 
{ 

if (m_tmpMonster.size() >0) { 

for (auto tmp: m_tmpMonster) 
{ 
m_monster.pop_ front () 7 
tmp->getOwner () ->removeFromParent () 7 


m_tmpMonster.clear(); 





编译 运行 ， 可 以 发 现 当 怪 物 走 到 路 径 的 尽头 会 消失 ， 并 扣除 塔 的 生命 值 。 


8.3 ”流程 控制 





























这 节 我 们 来 实现 游戏 的 流程 控制 。 它 需要 一 个 欢迎 界面 、 一 个 选 关 界面 和 一 个 游戏 界面 。 在 第 6 章 的 做 法 是 制作 三 个 层 ， 这 一 节 则 使 用 切换 场景 的 方式 实现 ， 效 果 如 图 8-6 所 示 。 








图 8-6 ”切换 场景 效果 











8.3.1 场景 与 层 

















场景 是 比 层 更 大 的 概念 ， 要 先 有 场景 才能 有 层 。 以 我 们 现 有 的 程序 为 例 ，HelloWorld 类 继承 自 Layer 类 ， 所 以 它 是 一 个 层 。 为 了 创建 场景 ， 又 在 其 中 增加 了 一 个 createScene 的 static 函 数 来 供 外 部 调 
用 。 在 AppDelegate.cpp 文 件 中 ， 程 序 加载 完 成 时 会 调用 这 个 函数 创建 一 个 场景 。 如 代码 清单 8-10 所 示 。 


代码 清单 8-10 ”创建 场景 





bool AppDelegate: :applicationDidFinishLaunching() { 
// initialize director 
auto director = Director: :getInstance (); 
auto glview = director->getOpenGLView () ; 
if(!glview) { 
glview = GLView::create ("My Game"); 
director->setOpenGLView (glview) ; 


} 

// turn on display FPS 

director->setDisplayStats (true) ; 

// set FPS. the default value is 1.0/60 if you don't call this 
director->setAnimationInterval (1.0 / 60); 
glview->setDesignResolutionSize (960, 640,ResolutionPolicy: :EXACT_FIT) ; 
// create a scene. it's an autorelease object 

auto scene = HelloWorld: :createScene () ; 

// run 

director->runWithScene (scene) ; 

return true; 

















在 创建 了 场景 后 ， 调 用 runWithScene 就 将 场景 载 入 进来 了 。 因 此 ， 如 果 要 更 改 程序 加 载 的 第 一 个 场景 ， 就 应 在 此 做 修改 。 


83.2 ”欢迎 场景 


打开 Cocostudio 项 目 ， 点击“ 文件 ”一 “新 建 项 目 ” 一 “新 建 场景 项 目 ”， 将 项 目 名 称 更 改 为 WelcomeScene。 青 点 击 “ 文 件 ” 一 “新 建 项 目 ”一 “新 建 UI 项 目 ”， 将 项 目 名 更 改 为 WelcomeUl, € 
是 用 来 配合 场景 使 用 的 。 


打开 WelcomeUI 项 目 ， 更 改 画 布 尺 寸 为 960*640。 简 单 起 见 ， 只 拖 入 一 个 按钮 ， 将 它 的 名 字 更 改 为 Start， 用 于 开始 游戏 。 编 辑 完成 后 ， 保 存 导出 。 
在 WelcomeScene 项 目 中 ， 拖 入 一 个 Ul 控件。 将 导出 的 WelcomeUl.json 拖 入 到 控件 所 需 文件 框 中 。 调 整 控件 位 置 后， 保存 导出 资源 。 


在 Classes 文 件 夹 中 增加 WelcomeScene.h 和 WelcomeScene.cpp 两 个 文件 ， 在 其 中 增加 场景 类 ， 添 加 如 代码 清单 8-11 所 示 的 代码 。 


代码 清单 8-11 ”欢迎 场景 





//WelcomeScene.h 

#ifndef Tower WelcomeScene h 

#define Tower WelcomeScene h 

#include "cocos2d.h" 

#include "ui/CocosGUI.h" 

class WelcomeScene : public cocos2d::Scene 


{ 


Public: 

virtual bool init(); 

CREATE_FUNC (WelcomeScene) ; 

void touchButton (cocos2d: :Ref* object, cocos2d: :ui::TouchEventType type); 
] 
#endif 











我 们 让 这 个 场景 类 继承 自 Scene。 与 HelloWorld 类 不 同 ， 这 个 类 是 一 个 场景 ， 因 此 其 在 AppDeleget.cpp 中 调用 的 方式 应 如 代码 清单 8-12 所 示 。 





代码 清单 8-12 ”调用 欢迎 场景 





//BppDeleget . cpp 
bool AppDelegate: :applicationDidFinishLaunching() { 
// initialize director 
auto director = Director: :getInstance (); 
auto glview = director->getOpenGLView() ; 
if(!glview) { 
glview = GLView::create ("My Game"); 
director->setOpenGLView (glview) ; 
} 
// turn on display FPS 
director->setDisplayStats (true) ; 
// set FPS. the default value is 1.0/60 if you don't call this 
director->setAnimationInterval (1.0 / 60); 
glview->setDesignResolutionSize (960, 640, ResolutionPolicy: :EXACT FIT); 
// create a scene. it's an autorelease object 
auto scene = WelcomeScene: :create (); 
// run 
director->runWithScene (scene) ; 
return true; 





然后 我 们 再 看 看 如 何 实现 欢迎 界面 的 载 入 ， 如 代码 清单 8-13 所 示 。 


代码 清单 8-13 ” 载 入 欢迎 界面 





//WelcomeScene.cpp 
#include "WelcomeScene.h" 
#include "cocostudio/CocoStudio.h" 
USING_NS_CC; 
using namespace cocostudio; 
using namespace ui; 
bool WelcomeScene: :init () 
{ 
if ( !Scene::init() ) 
{ 


return false; 


auto layer = Layer::create(); 

auto welcomeNode = cocostudio: :SceneReader: : get Instance () -> 
createNodeWithSceneFile ("publish/Welcome.json") ; 

auto uiComponent = dynamic_cast<ComRender*> (welcomeNode->getChildByTag (10004) 
->getComponent ("GUIComponent") ) ; 

auto ui = dynamic cast<ui: :Widget*>(uiComponent->getNode () ) ; 

auto start = dynamic cast<Widget*> (ui->getChildByName ("Start") ); 

start->addTouchEventListener (this, toucheventselector (WelcomeScene: : touchButton) ) ; 

auto back = Sprite: :create ("background.png") ; 

back->setAnchorPoint (Point: : ZERO) ; 

addChild (back, 0) ; 

layer->addChild (welcomeNode) ; 

this—>addChild (layer) ; 

return true; 





这 段 代 码 的 逻辑 很 清晰 ， 先 载 入 场景 ， 再 绑 定 按钮 的 响应 ， 点 击 按钮 进入 游戏 。 点 击 的 实现 如 代码 8-14 所 示 。 


代码 清单 8-14 ”点 击 响应 





//WelcomeScene.cpp 
#include "HelloWorldScene.h" 
void WelcomeScene: :touchButton (Ref *object, TouchEventType type) 
{ 
auto scene = HelloWorld: :createScene () ; 
auto transScene = TransitionFadeTR: :create(1,scene) ; 
Director: :get Instance () ->replaceScene (transScene) ; 











和 直接 执行 replaceScene 不 同 ， 我 们 为 切换 场景 加 入 一 点 效果 ， 通 过 TransitionFadeTR 类 对 创建 出 来 的 场景 进行 包装 ， 可 以 实现 不 同 的 效果 。 更 多 的 效果 可 以 去 TestCpp 的 Transitions 中 寻找 。 


























最 后 我 们 还 要 更 改 HelloWorld 场 景 初始 化 的 调用 位 置 。 为 了 保持 初始 化 的 简洁 和 流程 的 正确 性 ， 要 将 初始 化 的 代码 移动 到 onEnter 函 数 中 。 这 个 函数 在 进入 场景 时 被 调用 ， 更 改 如 代码 清单 8-15 所 示 。 








代码 清单 8-15 更改 初始 化 


bool HelloWorld: :init() 


{ 
17117111111111111111111111111/ 
// 1. super init first 
if ( !Layer::init() ) 
{ 
return false; 
} 


return true; 


} 
void HelloWorld: :onEnter () 
{ 
Layer: :onEnter (); 
auto back = Sprite: :create ("background.png"); 
back->setAnchorPoint (Point: : ZERO) ; 
addChild (back, 0) ; 





编译 运行 ， 出 现 欢迎 场景 ， 点 击 开始 按钮 ， 进 入 游戏 界面 。 





833 BREE 








与 打 砖 块 游戏 一 样 ， 我 们 可 以 制作 一 个 多 关卡 的 塔 防 游 戏 。 打 开 TileMap， 按 照 7.1 节 和 7.2 节 中 介绍 的 方法 制作 关卡 。 最 后 ， 制 作 一 个 选 关 的 场景 以 供 切 换 。 篇 幅 有 限 ， 此 处 就 不 再 重复 实现 了 ， 有 兴 


的 读者 可 以 自行 研究 。 制 作 关卡 的 效果 如 图 8-7 所 示 。 

















图 8-7 新 关卡 


8.4 结果 菜单 











接 下 来 ， 我 们 制作 一 个 简单 的 结果 界面 。 与 先前 不 同 的 是 ， 这 次 我 们 要 使 用 九宫 格 模式 来 实现 对 话 框 的 编辑 。 编 辑 后 的 结果 菜单 如 图 8-8 所 示 。 
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图 8-8 结果 菜单 


8.4.1 制作 九宫 格 菜单 






































游戏 程序 都 少不了 对 话 框 ， 而 对 话 框 的 尺寸 通常 会 很 大 ， 有 的 甚至 占 满 屏幕 。 直 接 使 用 等 大 的 图 片 ， 会 占用 很 大 的 内 存 ; 使 用 小 图 进行 拉 捉 ， 图 片 会 虚 化 ， 看 起 来 模糊 。 九 官 格拉 挤 是 应 对 这 种 问题 的 
最 好 方法 。 


















































九宫 格拉 掉 不 同 于 直接 缩放 图 片 ， 它 将 图 片 切 分 成 九 份 ， 在 缩放 时 ， 使 图 片 的 四 个 角 保 持 不 变 ， 对 其 他 位 置 的 图 块 重复 绘制 ， 而 不 是 拉 掉 图 像 ， 因 此 图 片 看 上 去 并 不 会 有 虚 化 的 感觉 。 基 于 这 个 原理 ， 
也 要 求 这 张 图 片 不 能 有 太 复 杂 的 花纹 。 









































打开 CocoStudio 场 景 项 目 ， 创 建 一 个 新 UI 项 目 ， 将 其 命名 为 Result。 确 保 光 盘 文 件 中 的 “chapter8/GUI/dlgBK.png” 在 assets 目 录 中 。 








[R] 


片 。 将 “属性 ”选项 卡 中 ，“ 尺 十 和 模式 ”一 “尺寸 ”后 面 的 下 拉 框 更 改 为 “Custom” 。 更 换 模 式 后 ， 勾 选 新 出 现 的 一 





从 工具 栏 中 拖 入 一 个 图 片 控 件 ， 将 其 “特性 ”一 “文件 ”设置 成 dlgBK.png 的 
个 九宫 格 的 选项 ， 将 参数 更 改 为 如 图 8-9 所 示 。 




















尺寸 和 模式 


IN 


在 设置 好 后 ， 我 们 可 以 看 到 条 型 的 原始 图 被 拉 掉 成 了 方形 ， 但 并 没有 出 现 虚 化 的 情况 。 
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图 8-9 设置 九宫 格 


接 下 来 的 工作 就 和 之 前 一 样 了 ， 将 刚才 的 对 话 框 背景 的 名 称 更 改 为 DIgBK; 创建 两 张 图 片 ， 分 别 更 改名 字 为 WinLabel 和 FailLabel; 再 添加 一 个 按钮 ， 命 名 为 Start。 











保存 导出 ， 将 publish 目 录 复 制 到 工程 中 。 





当 血 值 为 零 时 结束 游戏 ， 显 示 失 败 的 对 话 框 ， 因 此 我 们 要 在 HelloWorld.cpp 中 添加 一 个 endGame 函 数 ， 如 代码 清单 8-16 所 示 。 





代码 清单 8-16 ”结束 对 话 框 





// 声 明 

void endGame (bool isWin); 

// 实 现 

void HelloWorld: :endGame (bool isWin) 

{ 
m_fireManager->unscheduleUpdate () ; 
unscheduleAl1lSelectors (); 
m_monsters->stopAllActions () 7 
m_monsters->removeFromParent Os 


auto resultDlg = GUIReader: :get Instance () ->widgetFromJsonFile ("publish/Result .ExportJson") ; 


auto startBtn = dynamic_cast<ui::Button*>( 
resultDlg->getChildByName ("D1gBK") ->getChildByName ("Start") ) 7 


startBtn->addTouchEventListener (this, toucheventselector (HelloWorld: :touchButton) ) ; 
auto winLabel =resultDlg->getChildByName ("D1gBK") ->getChildByName ("WinLabel") ; 
auto failLabel =resultDlg->getChildByName ("D1gBK") ->getChildByName ("FailLabel") ; 


if (isWin) { 
winLabel->setVisible (true) ; 
failLabel->setVisible (false) ; 
} 
else 
{ 
winLabel->setVisible (false); 
failLabel->setVisible (true) ; 


} 
this—>addChild(resultDlg) ; 


} 
// 增 加 点 击 响 应 HelloWorldScene.h 
#include "ui/CocosGUI.h" 
void touchButton (cocos2d: :Ref* object, cocos2d::ui::TouchEventType type); 
//HelloWorldScene.cpp 
using namespace ui; 
void HelloWorld: :touchButton (Ref *object, TouchEventType type) 
{ 
auto scene = HelloWorld: :createScene () ; 
auto transScene = TransitionFadeTR: : create (1, scene) ; 
Director: :get Instance () ->replaceScene (transScene) ; 











这 里 我 们 还 要 添加 一 个 变量 ， 将 所 有 小 怪物 都 放 到 同一 层 ， 当 游戏 结束 时 ， 直 接 删除 这 





代码 清单 8-17 ”添加 怪物 层 





层 即 可 ， 如 代码 清单 8-17 所 示 。 





// 声 明 

cocos2d: :Node* m monsters; 
// 初 始 化 

void HelloWorld: :onEnter () 


m_pathVec = getWalkPath ("Walk") ; 
m monsters = Node: :create (); 
addChild(m monsters, 2) ; 
attachTowerBuild () ; 


} 

// 更 改 添加 怪物 层级 关系 

void HelloWorld: :makeMonster (float dt) 

{ 
//auto monster =CCSprite: :create ("Monster.png"); 
auto monster = Node: :create(); 


auto monterArmature = cocostudio: :Armature: :Create ("Monster") ; 
monster->setContentSize (monterArmature->getContentSize ()); 
auto path = m_pathVec; 


if (path.size() == 0) 
{ 


return ; 

} 
auto comMove = ComMove::create (m \ pathVec) $ 
monster->addComponent (comMove) ; 
auto comLife = ComLife::create (30*m_curRound) ; 
m_fireManager->m_monster.push back (comMove) ; 
monster->addComponent (comLife) ; 
monster->addChild (monterArmature) ; 
monterArmature->getAnimation ()->play ("Walk") ; 
m monsters->addChild (monster) ; 
comMove->startMove () ; 
m_monsterCreateLeft--; 
if (m monsterCreateLeft == 0) 

unschedule (schedule selector (HelloWorld: :makeMonster) ) ; 

runAction (Sequence: :create (DelayTime: :create (3+m_curRound), CallFunc::create ([=] () { 

if (m_curTowerLife >0) z 


{ 








m_curRound++; 
this->createWaveRusher () ; 


} 


}),nullptr) ); 

f 
} 
// 更 改 获取 场景 的 层级 
bool ComLife::attacked(int damage) 
{ 

bool dead = false; 

int after = m_currentHp - damage; 


if (after>0) 
{ 
m_currentHp = after; 
m_hpBar->setPercent ( m_currentHp / m_maxLife *100); 
} 
else 
{ 
dead = true; 
// 增 加 一 层 getParent 
auto playground = dynamic_cast<HelloWorld*>(getOwner ()->getParent ()->getParent ()); 


playground->changeGold (30) ; 


} 
return dead; 














之 后 在 ComMove 组 件 中 添加 调用 ， 当 血 值 减 为 O 时 ,调用 endGame 函 数 结束 游戏 ， 如 代码 清单 8-18 所 示 。 

















代码 清单 8-18 ”调用 对 话 框 





void ComMove: :initPath (std: :vector<cocos2d: :Point> path) 
{ 
if (path.size() == 0) 
{ 
return 7 
} 
Vector<FiniteTimeAction*> actionsArray; 
m startPos = path.at (0); 
for (unsigned int i = 1;i<path.size();++i) 
float duration = path.at (i-1) .getDistance (path.at (i)); 
float time = duration/NORMAL SPEED; 
actionsArray.pushBack (CCMoveTo: :create (time, path.at (i))); 
} 
actionsArray .pushBack (CallFunc: :create ( [=] () { 
// 注 意 此 处 父 级 关系 有 更 改 
auto playground = dynamic_cast<HelloWorld*>(getOwner () ->getParent ()->getParent () ) 7 
auto curLife = playground->changeTowerLife (-1) ; 
if (curLife 0) 
playground->endGame (false) ; 








else{ 
playground->removeMonster (getOwner () ) 7 
]) ) 7 
m_moveActions = CCSequence: :create (actionsArray) ; 


} 





编译 运行 ， 我 们 就 完成 了 “游戏 失败 ”的 部 分 。 
最 后 ， 更 改 makeMonster 函 数 ， 增 加 获胜 对 话 框 。 


代码 清单 8-19 ”获胜 对 话 框 





void HelloWorld: :makeMonster (float dt) 
{ 


auto path = m pathVec; 


if (path.size() = 0) 
return 7 
TEE == 10) 
: if (m_monsters->getChildrenCount () == 0) 


{ 
unschedule (schedule_selector (HelloWorld: :makeMonster) ) ; 
endGame (true) ; 
} 
return ; 
} 
auto comMove = ComMove::create (m pathVec); 
monster->addComponent (comMove) ; 





编译 运行 ， 胜 利 的 对 话 框 也 制作 完成 。 











至 此 ， 本 书 的 中 塔 防 游戏 开发 完成 。 塔 防 游戏 的 核心 在 于 关卡 的 制作 和 数值 的 控制 。 数 值 调 整 技巧 已 经 超过 了 本 书 知识 的 覆盖 范畴 ， 有 兴趣 的 读者 可 以 阅读 游戏 策划 类 型 的 书籍 深入 研究 。 


85 小 结 









































这 一 章 中 我 们 学 习 了 如 何 制 作 骨 骼 动画 ， 了 解 了 场景 的 概念 ， 从 而 能 够 构建 不 同 的 场景 进行 切换 ， 还 认识 了 九宫 格 的 作用 并 能 够 在 程序 中 使 用 。 


三 部 分 “拓展 知识 


' $I ”Cocos2D-X 特 性 总 结 
. 第 10 章 Android 平 台 的 SDK 接 入 
- 第 11 章 ”App Store 支付 接 入 


“ 第 12 章 ” 微 信 社交 分 享 


第 9 章 ”Cocos2D-X 特 性 总 结 


91 基本 类 与 宏 














前 面 章节 介绍 了 Cocos2D-X 中 各 种 元 素 的 功能 和 使 用 ， 




















一 节 来 总 结 它们 之 间 的 联系 ， 以 加 深 对 元 素 结构 的 理解 。 另 外 ， 还 要 学 习 如 何 利用 Cocos2D-X 中 的 常 F 
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9.1.1 _ Node 继承 体系 


宏 来 为 程序 开发 提供 方便 。 


不 论 是 能 看 见 的 Sprite 还 是 看 不 见 的 Layer， 几 乎 所 有 元 素 都 从 Node 直 接 或 间接 继承 。Node 作 为 万 物 之 基 ， 在 整套 系统 中 扮演 了 重要 的 角色 。Node 还 有 父 类 ， 但 这 个 父 类 只 是 一 个 功能 模块 ， 这 一 点 








将 在 9.3 节 谈 到 。 





Node 作 为 基本 类 包含 了 许多 基础 功能 ， 大 体 分 为 三 个 部 分 : 
缩放、 旋转 、 位 置 、 数 字 标签 信息 等 静态 信息 。 
“ 增加 子 节 点 、 添 加 用 户 自 定义 信息 、 移 除 父 子 关系 、 调 整定 时 器 、 播 放 动 画 等 操作 。 


“ 绘制 、 进 入 场景 、 退 出 场景 的 重 载 。 








实际 上 ， 拥 有 了 这 些 功能 和 特性 的 对 象 ， 就 已 经 是 一 个 元 素 了 ， 但 它 没 有 自己 的 “特点 ”， 比 如 ， 它 不 能 显示 出 图 片 或 文字 ， 不 能 处 理 输入 事件 ， 不 能 加 载 物理 系统 等 。 















































所 以 正常 的 思路 应 是 : 我 们 需要 哪 种 特性 的 元 素 ， 就 选择 哪 种 类 型 。 例 如 ， 要 显示 一 张 图 片 就 使 用 Sprite， 要 显示 文字 就 使 用 LabelTTF 等 。 甚 至 我 们 可 以 暂时 使 
更 改 它 的 类 型 。 











9.1.2 HAZ 











Cocos2D-X 中 有 很 多 宏 定 义 ， 这 里 我 们 介绍 三 类 常用 的 宏 : 新 建 对 象 、 命 名 空间 使 用 、 日 志 输 出 。 






































- 在 由 模板 创建 出 的 HelloWorld 类 中 ， 我 们 会 看 到 宏 CREATE_FUNC， 其 定义 如 代码 清单 9-1 所 示 。 


代码 清单 9-1 宏 示 例 











Node， 等 到 我 们 需要 某 种 特性 时 ， 再 





CREATE_FUNC (HelloWorld) ; 
#define CREATE_FUNC(_TYPE_) \ 
static _ TYPE_* create() \ 


{ \ 
__TYPE  *pRet = new TYPE (); \ 
if (pRet && pRet->init()) \ 
{\ 
pRet->autorelease(); \ 
return pRet; \ 
FA 
else \ 
EX 


delete pRet; \ 

pRet = NULL; \ 

return NULL; \ 
PAN 











它 是 一 个 创建 实例 的 函数 的 宏 。 当 我 们 编写 自己 的 类 ， 编 写 创 建 实例 函数 时 ， 也 应 使 用 这 个 宏 或 采用 这 种 方式 创建 ， 以 保障 内 存 的 安全 。 














“ 使 用 的 宏 还 能 够 简化 命名 空间 ， 如 代码 清单 9-2 所 示 。 


代码 清单 9-2 命名 空间 宏 





// namespace cocos2d {} 
#ifdef cplusplus 


#define NS CC BEGIN namespace cocos2d { 

#define NS_CC_END } 

#define USING_NS CC using namespace cocos2d 
#else 了 


#define NS_CC_BEGIN 

#define NS_CC_END 

#define USING_NS_CC 
#endif 





“ 使 用 宏 也 可 以 获取 和 设置 类 属性 。getXXX 与 setXXX 写 起 来 费时 费力 ， 可 以 直接 使 用 宏 来 代 痊 ， 如 代码 清单 9-3 所 示 。 


代码 清单 9-3 ”获取 和 设置 





#define CC SYNTHESIZE (varType, varName, funName) \ 

protected: varType varName; \ 

public: virtual varType get##funName (void) const { return varName; }\ 
public: virtual void set##funName (varType var) { varName = var; } 
#define CC_SYNTHESIZE_PASS_ BY REF (varType, varName, funName) \ 


protected: varType varName; \ 
public: virtual const varType& get##funName (void) const { return varName; }\ 
public: virtual void set##funName (const varType& var) { varName = var; } 
#define CC_SYNTHESIZE RETAIN(varType, varName, funName) \ 
private: varType varName; \ 
public: virtual varType get##funName (void) const { return varName; } \ 
public: virtual void set##funName(varType var) 
{ \ 
if (varName != var) \ 
EX 
CC_SAFE_RETAIN(var); \ 
CC SAFE RELEASE (varName); \ 
varName = var; \ 


Ea 





“ 最 后 建议 使 用 宏 的 形式 进行 日 志 的 打印 。 因 为 当 项 目 状态 不 是 调试 而 是 发 布 时 ， 宏 会 自动 转换 ， 不 输出 日 志 ， 省 去 了 我 们 打 正 式 版 本 时 屏蔽 日 志 的 工作 ， 如 代码 清单 9)-4 所 示 。 


代码 清单 9-4 HEA 





// cocos2d debug 





#if !defined (COCOS2D DEBUG) || COCOS2D_DEBUG == 

#define CCLOG (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) do {} while (0) 

#define CCLOGINFO (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) do {} while (0) 

#define CCLOGERROR (http://www.hzcourse. com/resource/readBook?path=/openresources/teach ebook/uncompressed/14 903/OEBPS/Text/ do {} while (0) 

#define CCLOGWARN (http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) do {} while (0) 

#elif COCOS2D_DEBUG == 1 i 

#define CCLOG (format, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) cocos2d: :1og (format, ##__VA ARGS ) 
#define CCLOGERROR (format, http://www.hzcourse. com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/ +++) cocos2d: :1og (format, ## VA ARGS) 
#define CCLOGINFO (format, http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) do {} while (0) 

#define CCLOGWARN (http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) _ CCLOGWITHFUNCTION( VA ARGS ) 

#elif COCOS2D DEBUG > 1 

#define CCLOG(format, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGERROR (format, http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGINFO (format, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGWARN (http://www.hzcourse. com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/ +++) __CCLOGWITHFUNCTION (__VA_ARGS__) i) =T 


#endif // COCOS2D DEBUG 





第 9 章 ”Cocos2D-X 特 性 总 结 


9.1 基本 类 与 宏 




















前 面 章节 介绍 了 Cocos2D-X 中 各 种 元 素 的 功能 和 使 用 ， 这 一 节 来 总 结 它们 之 间 的 联系 ， 以 加 深 对 元 素 结构 的 理解 。 另 外 ， 还 要 学 习 如 何 利用 Cocos2D-X 中 的 常用 宏 来 为 程序 开发 提供 方便 。 



































9.1.1. Node 继承 体系 





不 论 是 能 看 见 的 Sprite 还 是 看 不 见 的 Layer， 几 乎 所 有 元 素 都 从 Node 直 接 或 间接 继承 。Node 作 为 万 物 之 基 ， 在 整套 系统 中 扮演 了 
将 在 9.3 节 谈 到 。 





要 的 角色 。Node 还 有 父 类 ， 但 这 个 父 类 只 是 一 个 功能 模块 ， 这 一 点 








Node 作 为 基本 类 包含 了 许多 基础 功能 ， 大 体 分 为 三 个 部 分 : 

缩放、 旋转、 位 置 、 数 字 标 签 信息 等 静态 信息 。 

:增加 子 节点 、 添 加 用 户 自 定义 信息 、 移 除 父子 关系 、 调 整定 时 器 、 播 放 动画 等 操作 。 
“ 绘制 、 进 入 场景 、 退 出 场景 的 重 载 。 


实际 上 ， 拥 有 了 这 些 功能 和 特性 的 对 象 ， 就 已 经 是 一 个 元 素 了 ， 但 它 没 有 自己 的 “特点 ”， 比 如 ， 它 不 能 显示 出 图 片 或 文字 ， 不 能 处 理 输入 事件 ， 不 能 加 载 物理 系统 等 。 
































所 以 正常 的 思路 应 是 : 我 们 需要 哪 种 特性 的 元 素 ， 就 选择 哪 种 类 型 。 例 如 ， 要 显示 一 张 图 片 就 使 用 Sprite， 要 显示 文字 就 使 用 LabelTTF 等 。 甚 至 我 们 可 以 暂时 使 用 Node， 等 到 我 们 需要 某 种 特性 时 ， 再 
更 改 它 的 类 型 。 





























9.1.2 常用 宏 














Cocos2D-X 中 有 很 多 宏 定 义 ， 这 里 我 们 介绍 三 类 常用 的 宏 : 新 建 对 象 、 命 名 空间 使 用 、 日 志 输出 。 



































- 在 由 模板 创建 出 的 HelloWorld 类 中 ， 我 们 会 看 到 宏 CREATE_FUNC， 其 定义 如 代码 清单 9-1 所 示 。 


代码 清单 9-1 AAG 





CREATE_FUNC (HelloWorld) ; 
#define CREATE FUNC (__TYPE _) \ 
static __TYPE * create() V 
tA 
_TYPE *pRet = new TYPE (); \ 
if (pRet && pRet->init()) \ 
{ \ 
pRet->autorelease(); \ 
return pRet; \ 


delete pRet; \ 

pRet = NULL; \ 

return NULL; \ 
PA 











它 是 一 个 创建 实例 的 函数 的 宏 。 当 我 们 编写 自己 的 类 ， 编 写 创 建 实例 函数 时 ， 也 应 使 用 这 个 宏 或 采用 这 种 方式 创建 ， 以 保障 内 存 的 安全 。 














“ 使 用 的 宏 还 能 够 简化 命名 空间 ， 如 代码 清单 9-2 所 示 。 


代码 清单 9-2 命名 空间 宏 





// namespace cocos2d {} 
#ifdef _ cplusplus 


#define NS CC BEGIN namespace cocos2d { 


#tdefine NS_CC_END } 
#define USING NS_CC using namespace cocos2d 
#else 


#define NS_CC_BEGIN 

#define NS CC END 

#define USING NS CC 
#endif ~ 





“ 使 用 宏 也 可 以 获取 和 设置 类 属性 。getXXX 与 SetXXX 写 起 来 费时 费力 ， 可 以 直接 使 用 宏 来 代 葵 ， 如 代码 清单 9-3 所 示 。 


代码 清单 9-3 ”获取 和 设置 





#define CC SYNTHESIZE (varType, varName, funName) \ 

protected: varType varName; \ 

public: virtual varType get##funName (void) const { return varName; }\ 
public: virtual void set##funName(varType var){ varName = var; } 
#define CC_SYNTHESIZE PASS BY REF(varType, varName, funName) \ 
protected: varType varName; \ 

public: virtual const varType& get##funName (void) const { return varName; }\ 
public: virtual void set##funName (const varType& var){ varName = var; } 
#define CC_SYNTHESIZE RETAIN (varType, varName, funName) \ 

private: varType varName; \ 

public: virtual varType get##funName (void) const { return varName; } \ 


public: virtual void set##funName (varType var) \ 
EN 

if (varName != var) \ 

{\ 


CC_SAFE RETAIN(var); \ 
CC SAFE RELEASE (varName) ; \ 
varName = var; \ 


FX 





“ 最 后 建议 使 用 宏 的 形式 进行 日 志 的 打印 。 因 为 当 项 目 状态 不 是 调试 而 是 发 布 时 ， 宏 会 自动 转换 ， 不 输出 日 志 ， 省 去 了 我 们 打 正 式 版 本 时 屏蔽 日 志 的 工作 ， 如 代码 清单 9-4 所 示 。 





代码 清单 9-4 HEA 





// cocos2d debug 





#if !defined(COCOS2D_DEBUG) || COCOS2D_DEBUG == 

#define CCLOG (http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) do {} while (0) 

#define CCLOGINFO (http: //www.hzcourse. com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/ Sets), do {} while (0) 

#define CCLOGERROR (http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/ do {} while (0) 

#define CCLOGWARN (http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) do {} while (0) 

#elif COCOS2D DEBUG == 1 = 

#define CCLOG(format, http://www. hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGERROR (format, http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGINFO (format, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) do {} while (0) T =~ 
#define CCLOGWARN (http://www. hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/O0EBPS/Text/...) CCLOGWITHFUNCTION( VA ARGS ) 

#elif COCOS2D_DEBUG > 1 cad 一 = jase 

#define CCLOG(format, http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGERROR (format, http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGINFO (format,http://www.hzcourse. com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14 903/OEBPS/Text/...) cocos2d::log(format, ## VA ARGS ) 
#define CCLOGWARN (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/...) _ CCLOGWITHFUNCTION( VA ARGS ) 法 


#endif // COCOS2D DEBUG 





9.2 C++11 新 特性 














在 Cocos2D-X 3.0 中 引入 了 大 量 C++11 的 特性 。 为 了 能 够 更 好 地 理解 引擎 代码 ， 这 一 节 将 介绍 最 常用 的 C++11 特 性 ， 其 中 包括 自动 类 型 推断 auto，Lambda 函 数 ， 以 及 std::function 类 型 。 














9.2.1 auto 




















在 Cocos2D-X 3.0 的 代码 中 ， 我 们 可 以 看 到 大 量 的 auto 存 在 。auto 是 C++11 引 入 的 自动 类 型 推断 ， 它 用 来 声明 一 个 任意 类 型 的 变量 ， 这 使 得 代码 看 起 来 与 脚本 语言 非常 类 似 ， 如 代码 清单 9-5 所 示 。 














代码 清单 9-5 autorii 





#include <iostream> 

using namespace std; 

int main() 

{ 
auto a = 10; 
auto str = "I'm string" 
map<int,string> nameMap; 
auto iterator = nameMap.begin () 
cout<<a; 
cout<<str; 














在 编译 期 间 ， 编 译 器 会 自动 推导 这 些 变量 的 类 型 ， 因 此 并 不 会 影响 程序 的 执行 效率 。 在 声明 一 个 对 象 时 ， 我 们 可 以 使 用 auto 来 简化 编码 ， 比 如 下 面 这 种 方式 : 























auto sp = Sprite::create(); 
auto rect = sp->getPosition(); 





9.2.2 Lambda 函数 


很 多 语言 中 都 有 匿名 函数 ，C++11 也 是 使 用 Lambda 函 数 来 实现 的 这 种 功能 的 ， 如 代码 清单 9-6 所 示 。 








代码 清单 9-6 ”Lambda 使 用 示例 














#include <iostream> 

using namespace std; 

int main() 

{ 
auto function = [] () { cout << "Hello world"; }; 
function (); 








这 就 是 最 简单 的 一 个 lambda 函 数 ， 其 中 function 是 通过 auto 声 明 的 变量 ， 而 调用 function () 就 调用 了 这 个 lambda 函 数 。 从 外 部 传 入 匿名 函数 的 变量 有 以 下 几 种 : 





“ 0， 不 截取 任何 变量 。 


“ [&} ， 截 取 外 部 作用 域 中 所 有 变量 ， 并 作为 引用 在 函数 体 中 使 用 。 
: 加， 截取 外 部 作用 域 中 所 有 变量 ， 并 复制 一 份 在 函数 体 中 使 用 ， 
: 芭 ，&cfool， 截 取 外 部 作用 域 中 所 有 变量 ， 并 复制 一 份 在 函数 体 中 使 用 ， 但 是 对 foo 变 量 使 用 引用 。 


“ [baqj， 截 取 bar 变 量 并 复制 一 份 在 函数 体重 使 用 ， 同 时 不 截取 其 他 变量 。 





- [thisl， 截 取 当 前 类 中 的 this 指 针 。 如 果 已 经 使 用 了 &c 就 默认 添加 此 选项 。 























这 些 值 并 不 是 参数 ， 而 更 类 似 于 作用 域 的 概念 。 当 这 些 值 被 传 入 ， 就 可 以 直接 使 用 它们 。 在 实际 使 用 时 ， 我 们 可 以 看 到 如 代码 清单 9-7 所 示 的 代码 。 
































代码 清单 9-7 在 Cocos2D-X 中 使 用 Lambda 函 数 














auto duration = 1; 
auto ednPos = Point: :ZERO; 
auto sprite = Sprite::create(); 
auto fire = Sequence: :create (MoveTo: :create (duration, endPos), 
CallFunc: :create ( 
[=] () { 


sprite->removeFromParent () ; 





} 
) ,NULL) ; 
sprite->runAction (fire); 

















这 段 代码 很 简单 : 一 秒 移动 一 个 sprite 到 (0, 0) 点 ， 移 动 完成 后 移 除 自己 。 如 果 不 使 用 匿名 函数 ， 就 需要 再 定义 一 个 函数 ， 然 后 在 动作 中 注册 回调 ， 这 样 不 仅 繁琐 ， 而 且 不 易 阅 读 。 








9.2.3 std::function 类 型 











我 们 使 用 auto 声 明 的 lambda 函 数 究竟 是 什么 类 型 的 呢 ? 它 就 是 std::function。 在 Cocos2D-X 3.0 中 ， 这 种 类 型 大 量 存在 。 例 如 ， 我 们 看 到 Testcpp 中 的 每 一 个 测试 项 文件 的 最 上 面 都 有 一 个 
std::function 的 声明 定义 ， 如 代码 清单 9-8 所 示 。 











代码 清单 9-8 std::function 使 用 





static std: :function<Layer* ()> createFunctions[] = { 
CL(ActionManual) , 

CL(ActionMove) , 

CL(ActionRotate), 

CL(ActionScale) , 

CL (ActionSkew) , 
CL(ActionRotationalSkew) , 

CL (ActionRotationalSkewVSStandardSkew) , 
CL (ActionSkewRotateScale), 

CL (ActionJump) 

} 


#define CL(_ className ) [](){ return _ className ::create();} 








这 段 代 码 定义 一 个 std::function 类 型 的 数组 ， 其 中 元 素 是 类 的 创建 方法 ， 这 个 方法 的 返回 值 是 Layer*。 这 样 在 调用 时 直接 使 用 如 代码 清单 9-9 所 示 的 代码 ， 即 可 创建 一 个 指定 的 层 。 














代码 清单 9-9 ”创建 层 





int sceneIdx = 1; 
auto layer = (createFunctions[sceneIdx]) (); 
addChild (layer) ; 

















再 比如 ， 常 用 的 单 点 处 理 EventListenerTouchOneByOne， 其 定义 中 就 使 用 了 这 种 结构 ， 如 代码 清单 9-10 所 示 。 




















代码 清单 9-10 ”点 击 定义 


class EventListenerTouchOneByOne : public EventListener 
{ 
public: 
static const std::string LISTENER_ID; 
static EventListenerTouchOneByOne* create () 7 
virtual ~EventListenerTouchOneByOne () ; 
void setSwallowTouches (bool needSwallow) ; 
/// Overrides 
virtual EventListenerTouchOneByOne* clone() override; 
virtual bool checkAvailable() override; 
// 
public: 
std: : function<bool 
std: : function<void 
std: : function<void 
std: :function<void 
private: 
EventListenerTouchOneByOne () ; 
bool init (); 
std::vector<Touch*> _claimedTouches; 
bool _needSwallow; ` 
friend class EventDispatcher; 


Touch*, Event* 
Touch*, Event* 
Touch*, Event* 
Touch*, Event* 


onTouchBegan; 
onTouchMoved; 
onTouchEnded; 


)> 
)> 
)> 
)> onTouchCancelled; 


i 


我 们 定义 点 击 的 回调 时 ， 本 质 上 是 执行 一 个 赋值 操作 。 通 常 我 们 的 写法 如 代码 清单 9-11 所 示 。 


代码 清单 9-11 重 写 赋值 








auto listener = EventListenerTouchOneByOne: :create () ; 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 


CCLOG ("BEGIN") 

return true; 
en oo = [=] (Touch *pTouch, Event *pEvent) 
l CCLOG ("MOVE") ; 
ee = [=] (Touch *pTouch, Event *pEvent) 


CCLOG ("END") ; 
i 





这 样 就 可 以 重 写 一 个 点 击 回调 。 





93 ”内 存 管理 


凡是 谈 及 程序 ， 就 避 不 开 内 存 管理 。 尤 其 是 在 移动 设备 上 ， 内 存 尤为 

















要 , 占 














虽然 使 








几乎 所 有 的 Cocos2D-X 中 的 类 都 是 从 Ref 这 个 类 中 派生 出 来 的 ， 这 个 类 是 引 





码 实 现 的 ， 如 代码 清单 9-12 所 示 。 





代码 清单 9-12 引用 计数 核心 代码 





内 存 过 大 ， 会 导致 一 些 程序 无 法 运行 ， 





了 C++ 作为 开发 语言 ， 但 在 Cocos2D-X 中 管理 内 存 并 不 困难 ， 原 因 就 
































在 于 其 使 用 了 引用 计数 的 方法 。 


因此 要 非常 谨慎 地 进行 内 存 管 理 。 





计数 的 核心 。Ref 昌 然 很 高 大 上 ， 但 其 内 部 原理 并 不 复杂 。 我 们 可 以 一 起 来 看 看 这 个 引 























计数 功能 是 如 何 通 过 50 行 左右 的 代 





#include 
#include 
#include 
#include 


"CCRef.h" 
"CCAutoreleasePool.h" 
"ccMacros.h" 
"CCScriptSupport.h" 


NS_CC_BEGIN 
Ref: :Ref () 
: _referenceCount (1) // when the Ref is created, the reference count of it is 1 


{ 
#if CC ENABLE SCRIPT BINDING 


static unsigned int uObjectCount = 


0; 


_luaID = 0; 

“ID = ++u0bjectCount; 
#endif 
} 
Ref: :~Ref () 


{ 


#if CC ENABLE SCRIPT BINDING 
// if the object is referenced by Lua engine, remove it 
if (_luaID) 


{ 


} 


ScriptEngineManager: :getInstance ()-> 
getScriptEngine () ->removeScriptObjectByObject (this) ; 


else 


{ 


} 
#endif 


ScriptEngineProtocol* pEngine = ScriptEngineManager: :getInstance ()->getScriptEngine () 7 
if (pEngine != NULL && pEngine->getScriptType() == kScriptTypeJavascript) 


{ 


pEngine->removeScriptObjectByObject (this) ; 


void Ref::retain() 


CCASSERT (_referenceCount > 0, 


++_referenceCount; 


} 


void Ref::release() 


"reference count should greater than 0"); 


CCASSERT (_referenceCount > 0, "reference count should greater than 0"); 
—-_referenceCount; 
if (_referenceCount == 0) 


{ 

#if defined (COCOS2D DEBUG) && (COCOS2D_DEBUG > 0) 
auto poolManager = PoolManager: :getInstance (); 
if (!poolManager->getCurrentPool ()->isClearing() && poolManager->isObjectInPools (this) ) 


{ 


CCASSERT (false, "The reference shouldn't be 0 because it is still in autorelease pool."); 


} 
#endif 


} 


delete this; 


Ref* Ref::autorelease () 


PoolManager: :get Instance () ->getCurrentPool () ->addObject (this) ; 
return this; 


} 


unsigned int Ref::getReferenceCount () const 


{ 


return _referenceCount; 


} 
NS_CC_END 





不 难看 出 ，_refernceCount 是 引用 计数 器 。 当 对 象 创 如 


另外 我 们 还 注意 到 一 个 autorelease 函 数 ， 这 个 函数 将 对 象 本 身 加 入 到 了 一 个 名 为 AutoreleasePool 的 容器 中 。 当 这 个 容器 
圾 回收 。 其 实 程序 在 开始 运行 之 前 会 创建 一 个 
以 看 一 下 层 的 创建 函数 ， 如 代码 清单 9-13 所 示 。 





制 。 我 们 可 











代码 清单 9-13 ”创建 层 实现 


这 样 的 容器 ， 在 程序 运行 结束 后 











时 ， 引 用 计数 器 被 初始 化 为 1。 当 调用 retain 时 ， 计 数 增加 1; 当 调 有 























release 时 ， 计 数 减少 1。 当 计数 减少 到 0 时 ， 删 除 这 个 对 象 。 


身 被 释放 时 ， 这 个 函数 会 对 容器 中 的 元 素 都 执行 一 次 release， 实 现 灵活 的 二 

















去 释放 ， 


因此 程序 只 





按照 这 样 的 规则 实现 ， 就 可 以 最 大 程度 避免 内 存 泄 露 。 实 际 上 ， 在 创建 元 素 时 ， 我 们 都 使 











了 这 套 机 








Layer *Layer: :Create () 


{ 


Layer *ret = new Layer(); 


if 
{ 


} 


(ret && ret->init()) 


ret->autorelease (); 
return ret; 


else 


CC_SAFE_DELETE (ret) ; 
return nullptr; 








创建 一 个 层 ， 首 先 要 创建 一 个 对 象 ， 然 后 去 调 


94 Cocos2D-X 3.x 绘 制 优化 


在 游戏 的 运行 过 程 中 ， 
体现 在 减少 GPU 的 绘制 次 数 上 。 这 节 ; 


























它 的 init。init 就 是 我 们 通常 








jl 


形 绘制 的 开销 非常 大 。 对 绘制 优化 得 较 好 的 游戏 ， 可 以 在 更 多 的 手机 上 运行 ， 
将 分 别 从 自动 批 次 演 染 和 绘制 剔除 两 个 方面 来 看 新 版 本 Cocos2D-X 在 绘制 上 的 优化 。 


载 的 那个 函数 了 。 它 返回 true 时 ， 调 



































此 ， 在 良 莹 不 齐 的 Android 手 机 市 场 中 ， 对 绘制 进行 优化 也 是 重 中 之 重 。 

















四 




















autorelease， 将 这 个 对 象 放 到 自动 回收 池 中 ， 如 此 就 实现 了 内 存 的 自动 管理 。 


的 优化 主要 


9.4.1 自动 批 次 渲染 














在 Cocos2D-X 3.x 中 ， 抛 弃 了 先前 的 手动 编写 BatchNode， 采 上 

















动 管理 的 方式 。 说 起 BatchNode， 不 免 要 涉及 显卡 底层 的 绘制 原理 。 简 单 地 说 ， 每 提交 一 条 绘制 指令 到 显卡 都 会 产生 消耗 ， 因 此 尽量 

















少 提交 指令 就 可 以 优化 性 能 。 更 具体 地 说 ， 当 整个 场景 绘制 都 放 在 同一 条 指令 中 时 ， 是 最 佳 的 状态 。 关 于 底层 绘制 的 知识 ， 由 于 篇 幅 有 限 ， 这 里 不 详细 解释 ， 感 兴趣 的 读者 可 以 查阅 相关 资料 。 


这 里 只 介绍 理论 很 难说 明 问 题 ， 下 面 动手 写 个 示例 进行 测试 。 
创建 一 个 新 工程 ， 更 改 init 函 数 如 代码 清单 9-14 所 示 。 


代码 清单 9-14 更改 初始 化 








bool HelloWorld: :init () 
{ 


AAA 
// 1. super init first 

if ( !Layer::init() ) 

{ 


return false; 


Node* node = Node: :create(); 

char name [32]; 

for(int i = 0;i<100;++i) 

{ 
memset (name, 0, sizeof (name) ); 
sprintf (name, "%d.png",i%10); 
auto sprite = Sprite: :create (name); 
sprite—>setPosition (Point (i*5,i*5)); 
node->addChild(sprite, 0); 


} 
this—>addChild (node) ; 
return true; 











运行 代码 之 前 ， 找 到 光盘 中 的 “Chapter 9/Resources” 文 件 夹 ， 将 其 中 的 文件 复制 到 代码 工程 的 Resources 目 录 下 ， 可 以 发 现 资源 中 有 文件 名 0 到 9 的 图 片 。 之 后 运行 这 段 代码 ， 会 在 场景 中 循环 10 











次 ， 共 创建 100 张 图 片 。 图 片 资源 如 图 9-1 所 示 。 
































编译 运行 程序 ， 我 们 可 以 看 到 如 图 9-2 所 示 的 画面 。 











图 9-1 图 片 资 源 文件 





图 9-2 ”运行 效果 




















我 们 关注 的 是 图 9-2 左 下 角 信息 的 第 二 行 ， 其 中 “GL calls” 代 表 每 一 帧 中 OpenGL 指 令 的 调用 次 数 ， 这 个 数字 越 小 ， 程 序 的 绘制 性 能 就 越 好 。 现 在 每 一 帧 有 101 次 绘制 ， 其 中 100 次 是 100 个 元 素 的 给 
制 ， 多 出 来 的 一 次 是 绘制 这 条 左下 角 信 息 。 









































接 下 来 ， 我 们 使 用 合 图 软件 将 这 10 张 图 合成 一 张大 图 和 一 个 plist 文 件 。 在 使 用 CocoStudio 导 出 时 ， 选 择 “ 使 用 大 图 ” 即 可 将 小 图 合成 一 张大 图 。 当 然 我 们 也 可 以 选择 TexturePacker 这 种 专业 的 合 图 软 
件 。 合 成 的 图 片 分 为 “test.png” 和 “test.plist” 两 部 分 ， 可 参照 图 9-1 中 最 后 两 个 文件 。 合 并 后 的 文件 加 载 是 在 同一 张 纹理 上 ， 这 就 为 绘制 优化 提供 了 可 能 性 。 更 改 图 片 的 载 入 和 创建 方式 ， 就 可 利用 批 次 
演 染 对 绘制 进行 优化 。 更 改 init 函 数 如 代码 清单 9-15 所 示 。 






















































































代码 清单 9-15 ”更 改 纹理 载 入 





bool HelloWorld: :init () 
{ 
W71111111111111111111111111111 


// 1. super init first 
if ( !Layer::init() ) 
{ 


return false; 


} 
CCSpriteFrameCache: :getInstance ()->addSpriteFramesWithFile ("test.plist","test.png"); 
Node* node = Node: :create(); 
char name [32]; 
for(int i = 0;i<100;++i) 
{ 
memset (name, 0, sizeof (name) ); 
sprintf (name, "%d.png",i%10); 
//aato sprite = Sprite: :create (name) ; 
auto sprite = Sprite: :createWithSpriteFrameName (name) ; 
sprite->setPosition (Point (i*5,i*5)); 
node->addChild(sprite, 0); 


} 
this->addChild (node) ; 
return true; 





























在 代码 清单 9-15 种 中 ， 调 用 addSspriteFramesWithFile 函 数 将 大 图 载 入 到 内 存 中 ， 在 创建 对 象 时 ， 调 用 createWithSpriteFrameName 从 缓存 纹理 中 载 入 图 片 。 如 此 所 有 的 绘制 调用 都 可 以 合并 到 一 次 
OpenGL 指 令 中 ， 这 些 绘制 指令 的 计算 与 合并 都 由 Cocos2D-X 引 擎 完成 。 编 译 运 行 后 效果 如 图 9-3 所 示 。 
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图 9-3 ”优化 后 运行 效果 


我 们 可 以 非常 明显 地 看 到 ， 优 化 后 的 程序 “GL calls” 变 成 了 2 次 。 





另 一 方面 的 优化 是 绘制 剔除 。 相 对 于 上 一 种 优化 ， 这 个 要 更 容易 理解 : 它 是 指 当 一 个 元 素 移动 到 屏幕 之 外 ， 就 不 进行 绘制 了 。 





接着 刚才 的 例子 ， 我 们 测试 一 下 这 个 特性 。 更 改 init 函 数 如 下 : 








bool HelloWorld: :init() 


{ 
EE Ed 
// 1. super init first 
if ( !Layer::init() ) 
{ 


return false; 


} 
//CCSpriteFrameCache: :get Instance () ->addSpriteFramesWithFile ("test.plist", "test.png") ; 
Node* node = Node: :create(); 
char name [32]; 
for(int i = 0;i<100;++i) 
{ 
memset (name, 0, sizeof (name) ) 7 
sprintf (name, "%d.png",i%10); 
auto sprite = Sprite: :create (name) ; 
//aato sprite = Sprite: :createWithSpriteFrameName (name) ; 
sprite->setPosition (Point (i*5,i*5)); 
node->addChild(sprite, 0); 


} 
this->addChild (node) ; 
auto listener = EventListenerTouchOneByOne: :create () ; 
listener->onTouchBegan = [=] (Touch *pTouch, Event *pEvent) 
{ 
return true; 
hi 
listener->onTouchMoved = [=] (Touch *pTouch, Event *pEvent) 
{ 
node->set Position (node->getPosition () +pTouch->getDelta () ) ; 
li 
Director: :getInstance () ->getEventDispatcher () -> 
addEventListenerWithSceneGraphPriority (listener, this); 
return true; 























首先 ， 我 们 将 自动 批 次 渲染 的 优化 更 改 回来 ， 否 则 无 法 进行 测试 。 接 下 来 ， 我 们 在 场景 中 加 入 一 个 点 击 事件 ， 当 点 击 拖 动 屏幕 时 ， 移 动 这 100 个 元 素 。 编 译 运行 ， 效 果 如 图 9-4 所 示 。 





以 vy co o 


GL verts: 768 
GL calls: 87 
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图 9-4 剔除 运行 效果 











可 以 明显 地 看 到 ， 当 部 分 图 片 被 移出 屏幕 时 ，“GL calls” 的 数量 会 下 降 。 




















这 一 章 介绍 了 Cocos2D-X 的 Node 基 本 架构 ， 以 及 一 些 常用 的 宏 ; 普及 了 一 些 C++11 的 基本 知识 ， 如 auto、Lambda 函 数 等 ; 深入 解析 了 Cocos2D-X 内 存 管理 的 原理 ; 最 后 介绍 了 图 形 绘制 的 优化 。 了 
解 这 些 知识 ， 一 方面 可 以 加 深 对 引 殉 的 理解 ， 提 高 开发 效率 ; 另 一 方面 当 遇 到 Bug 或 性 能 瓶颈 时 可 以 更 好 地 分 析出 问题 的 根源 。 



































手 游 市 场 的 蓬勃 发 展 ， 繁 荣 了 大 大 小 小 的 Android 市 场 。 与 苹果 的 AppSstore 不 同 ，Android 平 台 的 形势 更 复杂 些 。 为 满足 统计 开发 者 收入 ， 管 理 用 户 的 信息 ， 掌 握 应 用 市 场 状态 等 需要 ， 各 家 Android 
平台 基本 上 都 有 自己 的 SDK。 国 内 有 少数 平台 可 以 不 接 入 SDK 直 接 发 布 产 品 ， 但 在 做 大 面积 推广 时 也 要 求 产品 接 入 SDK。 因 此 接 入 平台 SDK 成 了 发 布 大 销量 产品 的 一 条 必 经 之 路 。 






























































由 于 市 场 变化 得 很 快 ，SDK 的 版 本 也 会 经 常 变 化 ， 因 此 最 新 的 SDK 版 本 可 能 与 下 面 描述 的 有 些 出 入 。 所 幸 Android 平 台 的 接 入 都 大 体 相似 ， 这 里 我 们 选择 机 锋 的 Android 市 场 作为 例子 ， 看 一 下 如 何 接 入 
SDK, 














通常 说 来 ， 公 司 中 的 运营 或 商务 人 员 会 洽谈 好 接 入 事宜 ， 接 着 作为 开发 人 员 ， 我 们 会 得 到 一 个 AppKey 和 一 个 支付 Key。 通 常 说 来 ， 还 会 有 些 测试 账号 供 我 们 测试 充值 。 当 然 我 们 也 会 得 到 一 个 SDK 包 ， 
通常 在 其 中 包含 一 个 Demo。 











这 些 就 是 我 们 需要 的 全 部 东西 了 ， 接 下 来 本 章 将 介绍 如 何 将 这 个 SDK 集 成 到 我 们 的 程序 中 。 


注意 SDK 包 通常 是 使 用 Java 语 言 开发 出 来 的 ， 因 此 所 有 接 入 SDK 的 程序 都 只 能 运行 在 Android 平 台 上 。 本 章 的 所 有 程序 都 需要 编译 到 手机 上 才能 看 到 效果 。 























在 这 个 测试 中 ， 我 们 使 用 项 目 中 默认 的 关闭 按钮 作为 交互 按钮 。 当 点 击 按钮 时 ， 将 文字 更 改 为 “Call Android”。 另 外 还 要 将 SDK 的 jar 包 引入 到 工程 中 。 基 本 环境 配置 完成 如 图 10-1 所 示 。 























Hello World 
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图 10-1 配置 基本 环境 











在 Cocos2D-X 中 创建 一 个 空 项 目 ， 命 名 为 “MySDK”。 编 译 运 行 ， 保 证 项 目 正常 。 更 改 init 函 数 如 代码 清单 10-1 所 示 。 














代码 清单 10-1 更改 主 界面 





bool HelloWorld: :init () 


{ 
W71111111111111111111111111111 
// 1. super init first 
if ( !Layer::init() ) 
{ 
return false; 
} 
Size visibleSize = Director: :getInstance ()->getVisibleSize (); 
Point origin = Director: :getInstance()-—>getVisibleOrigin(); 
auto closeItem = MenuItemImage: :create ( 

"CloseNormal .png", 

"CloseSelected.png", 

CC_CALLBACK 1 (HelloWorld: :menuCloseCallback, this)); 
CloseItem->setPosition (Point (origin.x + visibleSize.width/2 一 
CloseItem->getContentSize() .width/2 ,origin.y tvisibleSize.height/2+ 
closeItem->getContentSize() .height/2)); 

// create menu, it's an autorelease object 

auto menu = Menu: :create (closeItem, NULL); 

menu->setPosition (Point: :ZERO); 

this->addChild(menu, 1); 

auto label = LabelTTF::create ("Hello World", "Arial", 24); 

label->setPosition (Point (origin.x + visibleSize.width/2, 
origin.y + visibleSize.height - 300)); 

label->setTag (100) ; 

// add the label as a child to this layer 

this->addChild(label, 1); 

return true; 














在 这 段 代码 中 ， 我 们 调整 了 点 击 按钮 的 位 置 ， 将 它 设置 为 屏幕 中 心 。 另 外 将 文字 “Hello World” 的 Tag 设 置 为 100， 以 便 后 面 通过 Tag 找 到 它 。 











界面 更 改 好 后 再 更 改 点 击 的 逻辑 ， 在 点 击 响应 中 为 区 分 平台 作 逻 辑 处 理 ， 如 代码 清单 10-2 所 示 。 








代码 清单 10-2 点击 处 理 





void HelloWorld: :menuCloseCallback (Ref* pSender) 
{ 
#if (CC TARGET PLATFORM == CC_PLATFORM ANDROID) 
auto label = dynamic_cast<LabelTTF¥>(getChildByTag (100) ) ; 
label->setString ("Call Android"); 
#else 
Director: :getInstance ()->end() ; 
exit (0); 
#endif 
} 

















通过 CC_TARGET_PLATFORM 宏 能 够 取得 当前 程序 运行 的 平台 。 例 如 ， 当 我 们 使 用 VS2012 运 行程 序 ， 平 台 为 CC_PLATFORM_WIN32。 当 对 不 同 平台 编写 代码 时 ， 通 常 要 采用 
CC_TARGET_PLATFORM 来 区 分 不 同 的 情况 。 











Cocos2D-X 支 持 很 多 平台 ， 可 以 跳 转 到 CC_PLATFORM_ANDROID 的 定义 处 ， 查 看 其 他 平台 的 定义 。 











编译 运行 ， 当 在 非 Android 平 台 运行 时 ， 点 击 按钮 退出 应 用 ; 当 编 译 到 Android 手 机 上 运行 时 ， 点 击 按钮 ， 更 改 显 示 文 字 为 “Call Android”。 

















基本 项 目 搭建 好 后 ， 我 们 再 来 配置 Android 的 SDK。 























SDK 说 到 底 是 一 个 程序 扩展 组 件 ， 通 常 是 通过 Java 编 写 的 jar 包 。 其 中 包含 了 登录 、 支 付 等 与 平台 相关 的 基本 功能 。 不 同 的 SDK 需 要 不 同 的 项 目 配置 ， 例 如 程序 权限 要 求 ， 一 些 全 局 信息 等 。 如 何 更 改 这 
些 配 置信 息 通常 会 写 在 SDK 的 文档 中 说 明 。 


参考 SDK 的 对 应 文档 ， 在 “proj.android/AndroidMainifest.xml” 中 增加 对 应 的 配置 。 这 些 配置 已 经 被 gfan、netbank 注 释 标 明 ， 如 代码 清单 10-3 所 示 。 


代码 清单 10-3 更改 AndroidMinifest.xml 





<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com. fansy.mySDK" 
id:versionCode="1" 
:versionName="1.0"> 
<uses-sdk 
android:minSdkVersion="9" 
android: targetSdkVersion="9" /> 
<uses-feature android:glEsVersion="0x00020000" /> 
<application android:label="@string/app_name" 
android: icon="@drawable/icon"> 
<meta-data 
android:name="gfan pay appkey" 
android:value="325077622"/> 
<meta-data 
android:name="gfan_cpid" 
android:value="GFan" /> 
<activity android:name="org.cocos2dx.cpp.Cocos2dxActivity" 
android: label="@string/app_name" 
android: screenOrientation="landscape" 
android: theme="@android: style/Theme.NoTitleBar.Fullscreen" 
android: configChanges="orientation"> 
<!-- Tell NativeActivity the name of our .so --> 
<meta-data android:name="android.app.1lib name" 
android:value="cocos2dcpp" /> 
<intent-filter> 
<action android:name="android.intent.action.MAIN" /> 
<category android:name="android.intent.category.LAUNCHER" /> 
</intent-filter> 
</activity> 
<!-- start for gfan sdk --> 
<activity 
android:name="com.mappn.sdk.uc.activity.LoginActivity" 
android: theme="@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 
<activity 
android:name="com.mappn.sdk.uc.activity.RegisterActivity" 
android: theme="@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 

















<activity 
android:name="com.mappn.sdk.uc.activity.OnekeyLoignActivity" 
android: "@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 
<activity 
android: com.mappn.sdk.uc.activity.ModfiyActivity" 


android: theme="@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 
<activity 
android:name="com.mappn.sdk.uc.activity.ChooseAccountActivity" 
android: theme="@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 
<activity 
android:name="com.mappn.sdk.pay.payment.PaymentsActivity" 
android: theme="@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 





<activity 
android: com.mappn.sdk.pay.chargement.ChargeActivity" 
android: "@style/Transparent" 
android: configChanges="orientation|keyboardHidden" /> 
<activity 





android:name="com.mappn.sdk.pay.account.LoginActivity" 
android: configChanges="orientation | keyboardHidden" 
android: windowSoft InputMode="adjustUnspecified" 
android:theme="@style/Transparent" /> 
<!-- mo9 sey 
<activity android:name="com.mokredit.payment .MktPayment" 
android: configChanges="keyboardHidden |orientation" 
android: windowSoft InputMode="adjustResize"/> 
<service android:name="com.mappn.sdk.pay.GfanPayService" /> 
<!-- start for net bank --> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.SplashActivity" 
android: screenOrientation="portrait" > 
<intent-filter> 
<action android:name="com.unionpay.upomp.1thj.android.plugin.init.test" /> 
<category android:name="android.intent.category.DEFAULT" /> 
</intent-filter> 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.IndexActivityGroup" 
android: screenOrientation="portrait" > 
<intent-filter> 
<action android:name="com.unionpay.upomp.1thj.android.plugin.index.test" /> 
<category android:name="android.intent.category.DEFAULT" /> 
</intent-filter> 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.HomeActivity" 
android: screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.PayActivity" 
android: screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.AccountActivity" 
android:screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.BankCardInfoActivity" 
android: screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.SupportCardActivity" 
android: screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.UserProtocolActivity 
android: screenOrientation="portrait" > 
</activity> 
<activity 
android:name="com.unionpay.upomp.1thj.plugin.ui.AboutActivity" 
android: screenOrientation="portrait" > 
</activity> 
<!-- end for net bank --> 
</application> 
<supports-screens android:anyDensit: 
android: smallScreens 
android:normalScreens="true" 
android: largeScreens="true" 
android: xlargeScreens="true"/> 
<!-- start for gfan sdk --> 
<uses-permission android:name="android.permission.INTERNET" /> 

















<uses-permission android:name="android.permission.READ PHONE STATE" /> 
<uses-permission android:name="android.permission.ACCESS NETWORK STATE" /> 
<uses-permission android:name="android.permission.ACCESS WIFI_STATE" /> 
<uses-permission android:name="android.permission.MOUNT_UNMOUNT _FILESYSTEMS" /> 
<uses-permission android:name="android.permission.WRITE EXTERNAL STORAGE" /> 
<uses-permission android:name="android.permission.RECEIVE BOOT COMPLETED" /> 
<!-- end for gfan sdk --> = = 














</manifest> 
其 中 要 注意 下 面 的 设置 : 
<meta-data 


android:name="gfan_pay_appkey" 

android: value="325077622"/> 
<meta-data 

android:name="gfan_cpid" 

android:value="GFan" /> 




































































gfan_pay_appkey 是 用 来 区 分 接 入 SDK 用 户 的 ， 其 值 是 从 SDK 提 供 商 处 获得 的 号 码 ， 是 能 够 唯一 标识 应 用 的 I1D 号 。 换 句 话说 ， 如 果 这 个 号 码 填 错 了 ， 用 户 的 钱 就 充 到 别人 的 账户 上 了 。gfan_cpid 是 用 
来 标识 用 户 是 从 什么 渠道 来 的 ， 这 个 值 随便 写 ， 通 常 是 给 自己 看 。 














10.2 Android 环 境 配置 


在 上 一 节 中 ， 我 们 为 MYSDK 项 目 更 改 了 配置 ， 在 这 节 中 ， 我 们 将 看 到 如 何 设置 一 个 完整 的 开发 环境 ， 并 将 SDK 加 载 到 Cocos2D-X 的 程序 外 层 。 





10.2.1 Eclipse 配置 项 目 关联 























关联 SDH 与 我 们 的 程序 ， 可 以 通过 设置 项 目 依赖 的 方式 完成 。 打 开 Eclipse， 上 点击“ 文件 ”一 “导入 ”， 在 弹出 的 对 话 框 中 选择 “Existing Android Code into Workspace”， 如 图 10-2 所 示 。 























Import 


Select an import source: 
type filter text 


> E> General 
T E Android 
gg Existing Android Code Into Workspace 
P C/C++ 
+ (= Gh 
> E Install 
b 车 Runi Debug 
» E Team 
P (= AML 


Finish 





图 10-2 $ALE 


提示 “Eclipse 是 一 个 开放 源 代码 的 、 基 于 Java 的 可 扩展 开发 平台 。 就 其 本 身 而 言 ， 它 只 是 一 个 框架 和 一 组 服务 ， 用 于 通过 插件 组 件 构建 开发 环境 。 大 多 数 开发 者 将 Eclipse 当做 Java 集 成 开发 环境 (IDE) 
来 使 用 。 








在 接 下 来 的 对 话 框 中 ， 点 击 “Root Directory” 行 末 的 按钮 ， 选 择 SDK 的 文件 路 径 ， 选 好 后 ，Eclipse 会 自动 检测 目录 下 的 文件 ， 如 图 10-3 所 示 。 最 后 点 击 右 下 角 的 Finish 添 加 工程 。 











Import Projects 
Select a directory to search for existing Android projects 


Root Directory: /Users/fansy/Desktop/GfanSDK3.3 


Projects: 








Project to Import New Project Name Select All 
TA /Users/fansy/Desktop/GfanSDK3.3 GfanSDK3.3 - 


Deselect All | 


Refresh 


|_| Copy projects into workspace 
Working sets 


(|_| Add project to working sets 


Working sets: Select... 





_ <Back _ Next > _ Cancel | | Finish _ 





图 10-3 ”添加 工程 
注意 ”如 果 工程 中 已 经 存在 同名 的 项 目 ， 此 处 Project 下 显示 的 “Project to Import” 项 目 会 显示 为 灰色 ， 无 法 添加 。 要 先 在 Eclipse 左 侧 的 “Package Explorer” 中 将 同名 项 目 删除 。 


按照 这 样 的 方法 ， 导 入 GfanSDK3.3 和 upopmp_Res_v1_1 这 两 个 SDK 中 的 工程 ， 然 后 再 导入 我 们 刚刚 创建 的 Cocos2D-X 工 程 MySDK。 





在 Eclpse 的 “Package Explorer” 中 ， 右 击 工程 MySDK， 点 选 properties， 在 弹出 的 对 话 框 的 左 侧 列表 中 选择 Android， 然 后 再 点 击 下 面 的 Library 标 签 中 的 Add 按 钮 ， 选 择 项 目 GfanSDK3.3， 如 图 10- 
4 所 示 。 选 好 后 点 击 确定 添加 依赖 。 














|S Package Explorer 52 


> ES GfanSDK3.3 
D LS MySDK 
> WS upomp_Res_v1_1 


注意 ”如果 包 中 缺少 JNI 的 话 ， 需 要 将 cocos2d/cocos/2d/platform/android/java/stc 中 的 文件 包 复 制 到 工程 中 。 


10.2.2 ”创建 主 Activity 


Cocos2D-X 是 以 库 的 方式 加 载 的 ， 我 们 可 以 在 库 加 载 成 功 后 ， 再 加 载 或 操作 我 们 要 接 入 的 SDK。 首 先 我 们 要 创建 一 个 继承 自 Cocos2dxActivity 的 类 。 在 Eclipse 中 找到 MySDK 项 
文件 夹 ， 在 弹出 的 菜单 中 选择 New 一 Package， 添 加 一 个 名 为 com.fansy.mySDK 的 包 ， 然 后 F 


代码 清单 10-4 “添加 主 Activity 


type filter text 


P Resource 
Android 


Android Lint Prefer 


Builders 


> C/C++ Build 

> C/C++ General 
Java Build Path 

» Java Code Style 

> Java Compiler 


» Java Editor 


Javadoc Location 
Project References 
Run/Debug Setting 


Task Tags 
» Validation 


图 10-4 ”添加 依赖 项 目 

















Properties for MySDK 
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Project Selection 
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Up 


























同样 的 方法 ， 添 加 一 个 MainActivityjava 的 类 ， 如 代码 清单 10-4 所 示 。 





public class MainActivity extends Cocos2dxActivity{ 


@Override 


protected void onCreate (Bundle savedInstanceState) { 
// TODO Auto-generated method stub 
super.onCreate (savedInstanceState) ; 


Log.d("","Main create"); 


GfanPay.getInstance (getApplicationContext ()) .init(); 


中 的 src 文 件 夹 ， 右 击 





在 这 段 代 码 中 ，super.onCreat 函 数 是 调 














代码 清单 10-5 设置 配置 














父 类 创建 的 ， 即 Cocos2D-X 库 的 载 入 。 接 下 来 ， 调 




















GfanPay.getlnstance (getApplicationContext () ) .init () ， 这 个 函数 是 SDK 中 定义 的 初始 化 函 
数 。 调 用 它 就 会 初始 化 SDK 了 。 最 后 更 改 “AndroidManifest.xml”， 将 启动 Activity 设 置 成 自己 的 类 。 





<activity android:name="com. fansy.mySDK.MainActivity" 
android:label="@string/app_name" 
android: screenOrientation="landscape" 
android: theme="@android: style/Theme .NoTitleBar. Fullscreen" 
android: configChanges="orientation"> 





编译 运行 ， 在 手机 上 运行 无 错误 即 完成 了 基本 环境 的 配置 。 


10.3 “C++ 调用 SDK 功 能 


我 们 要 先 从 Cocos2D-X 的 C++ 函数 中 调用 SDK 中 的 相应 模块 ， 这 些 模块 通常 是 通过 java 实现 的 。 然 后 SDK 会 获得 程序 的 
从 Java 中 调用 到 Cocos2D-X 的 C++ 函数 来 通知 用 户 的 操作 结果 ， 同 时 将 程序 的 主动 权 交还 给 C+ + 部 分 。 




















FE 动 权 ， 运 行内 部 的 Java 模 块 ， 例 如 用 户 登录 、 支 付 等 操作 。 完 成 用 户 操作 后 会 





这 中 间 的 桥梁 是 Java Native Interface (INI) 。 具 体 的 细节 此 处 不 复述 ， 感 兴趣 的 读者 可 以 自行 查阅 相关 知识 ， 这 里 我 们 主要 来 看 看 如 何 使 用 。 调 用 成 功 后 效果 图 如 图 10-5 所 示 。 

















免 注册 登录 





图 10-5 ”调用 登录 界面 


10.3.1 添加 C++ 调用 




















C++ 调用 Java 要 先 创 建 一 个 虚拟 机 ， 然 后 调 有 
码 清单 10-6 所 示 。 














对 应 的 方法 。 所 幸 ，Cocos2D-X 已 经 为 此 做 了 封装 ， 我 们 调用 现成 的 接口 即 可 。 这 是 








我 们 调用 Java 中 的 Login 函 数 。 更 改 HelloWorldScene.cpp 文 件 如 代 





代码 清单 10-6 ”添加 C++ 调用 





#if (CC_TARGET PLATFORM == CC_PLATFORM_ANDROID) 
#include "platform/android/jni/jniHelper.h" 
#endif 


void HelloWorld: :menuCloseCallback (Ref* pSender) 


#if (CC TARGET PLATFORM == CC PLATFORM ANDROID) 

JniMethodInfo method; ~ = 

std::string className = "com/fansy/mySDK/MainActivity"; 

if (IniHelper: :getStaticMethodInfo (method, className.c_str() , "rtnObject", 

"() Ljava/lang/Object;")) T 

{ 
jobject jobj; 
jobj = method.env->CallStaticObjectMethod (method.classID, method.methodID) ; 
if (JniHelper: :getMethodInfo (method, className.c_str(), "LogIn", "()V")) 
{ 

method.env->CallVoidMethod(jobj, method.methodID) ; 

return; 


} 


auto label = dynamic cast<LabelTTF*> (getChildByTag (100) ) ; 
label->setString ("CaĪl Android") ; 

#else 
Director: :getInstance ()->end () ; 
exit (0); 

#endif 

} 

















首先 ， 我 们 使 用 了 宏 CC_TARGET_PLATFORM 对 编译 平台 进行 了 判断 。 上 面 














的 代码 只 有 在 Android 平 台 上 编译 才 会 引入 JNI 的 头 文件 ， 并 编译 到 JNI 的 调用 代码 。 














注意 ”由 于 不 同 平台 上 有 时 会 出 现 相 同类 型 的 不 同 定义 ， 因 此 很 多 时 候 需要 区 分 平台 来 进行 编译 的 控制 ， 否 则 会 导致 重 定义 的 错误 ， 无 法 编译 通过 。 











然后 ， 我 们 再 看 看 menuCloseCallback 函 数 。className 变 量 是 我 们 在 10.2 中 创建 的 Java 类 的 类 名 ， 
来 ， 将 其 赋 给 JniMethodlnfo 类 型 的 变量 method， 静 态 函 数 rnObject 我 们 会 在 后 面 添加 。 通 过 调 
CallVoidMethod 也 能 调用 到 Java 中 的 Logln 函 数 。 














中 要 包含 包 名 。 接 着 调用 getStaticMethodInfo 函 数 ， 将 Java 类 中 的 静态 函数 rtnObject 取 i 
CallStaticObjectMethod 实 现 从 C++ 调 用 对 rtnObject 的 调用 ， 返 





crc 












































回 





一 个 jobject 类 型 的 值 。 同 理 ， 通 过 





10.3.2 ”添加 java 实现 函数 


接 下 来 更 改 Java 代 码 ， 在 类 中 添加 Logln 方 法 。 另 外 要 添加 静态 函数 rnObject， 以 便 取 到 对 应 的 Activity。 如 代码 清单 10-7 所 示 。 





代码 清单 10-7 添加 调 














public class MainActivity extends Cocos2dxActivity{ 
public static MainActivity s_ Instance = null; 
public static Object rtnObject() { 
return s_Instance; 


protected void onCreate (Bundle savedInstanceState) { 
s_Instance = this; 
} 


public void LogIn() { 
GfanUCenter.login(this, new GfanUCCallback() { 
private static final long serialVersionUID = 8082863654145655537L; 


@Override 
public void onSuccess (User user, int loginType) { 
// TODO 登录 成 功 处 理 
ToastUtil.showLong (getApplicationContext () , "登录 成 功 user: " + 
user.getUserName () ) ; 
} 


Override 
public void onError (int loginType) { 
Toast .makeText (getApplicationContext () ，" 登 录 失 败 ",Toast.LENGTH SHORT) . show () ; 


} 


























调用 rtnObject 函 数 ， 会 返回 一 个 s_ Instance 的 变量 ， 它 在 onCreate 中 被 赋值 ， 用 来 记录 自己 所 在 的 MainActivity 对 象 。 在 Logln 中 ， 我 们 调用 SDK 中 的 GfanUCenter.login 函 数 来 启动 登录 界面 。 当 
户 登 录 成 功 时 ， 会 调用 onSuccess 函 数 ， 失 败 时 则 调用 onError 函 数 。 通 常 SDK 的 接口 使 用 都 会 在 文档 中 有 记录 。 















































编译 运行 ， 点 击 按钮 即 可 调 出 SDK 的 登录 界面 。 
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通过 C++ 调用 Java， 我 们 可 以 通知 到 SDK 用 户 的 操作 。 当 用 户 操作 完成 后 ， 还 需要 把 主动 权 交 还 给 Cocos2D-X 程 序 本 身 。 这 节 我 们 学 习 如 何 获取 到 SDK 的 反馈 。 接 收 反馈 的 效果 如 图 10-6 所 示 。 
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10-6 接收 Java 的 反馈 

















为 了 编写 回调 ， 我 们 要 更 改 java 类 “MainActivityjava”， 在 其 中 加 入 一 个 native 方 法 ， 如 代码 清单 10-8 所 示 。 


代码 清单 10-8 native 方法 








public class MainActivity extends Cocos2dxActivity{ 
public native void OnLogin(int result, String userName) ; 
@Override 
protected void onCreate (Bundle savedInstanceState) { 
// TODO Auto-generated method stub 
super .onCreate (savedInstanceState) ; 
Log.d("","Main create"); 
GfanPay.get Instance (getApplicationContext ()) .init (); 

















添加 好 后 ， 打 开 Shell， 命 令 行 中 进入 到 proj.android/src 目 录 下 ， 运 行 如 下 命令 : 











javah -jni com.fansy.mySDK.MainActivity 





运行 后 会 生成 一 个 JNI 格 式 的 头 文件 ， 如 代码 清单 10-9 所 示 。 


代码 清单 10-9 ”生成 头 文件 





/* DO NOT EDIT THIS FILE - it is machine generated */ 
#include <jni.h> 

/* Header for class com fansy mySDK MainActivity */ 
#ifndef _Included_com_fansy_mySDK MainActivity 
#define _Included com fansy mySDK MainActivity 
#ifdef cplusplus 

extern "C" { 

#endif 


/* 

* Class: com fansy mySDK MainActivity 

* Method: OnLogin 

* Signature: (ILjava/lang/String;)V 

* 

JNIEXPORT void JNICALL Java com fansy mySDK MainActivity_OnLogin 
(JNIEnv *, jobject, jint, jstring); 

#ifdef _ cplusplus 

} 

#endif 

#endif 





























这 个 文件 是 由 JNI 生 成 的 接口 文件 ， 我 们 只 需 在 代码 中 通过 include 包 含 这 个 头 文件 ， 使 用 C 或 C++ 在 其 中 实现 自己 的 功能 即 可 。 





























10.4.2 ”实现 处 理 逻 辑 


把 代码 清单 10-9 中 的 内 容 复制 到 “HelloWorldSscene.cpp” 中 。 然 后 编写 代码 ， 实 现 响应 功能 ， 如 代码 清单 10-10 所 示 。 





代码 清单 10-10 ”实现 回调 





#if (CC_TARGET_PLATFORM == CC_ PLATFORM ANDROID) 
#include "platform/android/jni/jniHelper.h" 
#ifdef _cplusplus 


#endif 
/* 
* Class: com fansy mySDK MainActivity 
* Method: OnLogin 


* Signature: (ILjava/lang/String;)V 
* 


JNIEXPORT void JNICALL Java com fansy mySDK MainActivity_OnLogin 
(UNIEnv *env, jobject thiz, jint jnResult, jstring jstrRet) 
{ 
const char* pText = NULL; 
if(jstrRet) { 
PText = env->GetStringUTFChars (jstrRet, NULL); 


auto children = Director: :getInstance ()->getRunningScene ()->getChildren () ; 
for (auto child:children) 
{ 
auto layer = dynamic_cast<HelloWorld*> (child) ; 
if (layer) { 
cocos2d::LabelTTF* label = dynamic_cast<cocos2d: : Label TTF*> ( 
layer->getChildByTag(100)); 一 
label->setString (pText) ; 


} 


} 
#ifdef _ cplusplus 
} 
#endif 
#endif 








可 以 看 到 ， 我 们 将 登录 之 后 的 信息 通过 jstring 类 型 的 变量 jstrRet 传 入 到 函数 中 ， 然 后 将 其 赋值 给 pText。 接 着 就 是 Cocos2D-X 的 知识 了 ， 找 到 界面 中 的 文字 ， 将 其 更 改 为 对 应 的 信息 。 











最 后 更 改 Java 中 登录 完成 的 处 理 ， 如 代码 清单 10-11 所 示 。 





代码 清单 10-11 ”登录 后 的 处 理 





public void LogIn() { 
GfanUCenter.login(this, new GfanUCCallback() { 

private static final long serialVersionUID = 8082863654145655537L; 

@Override 

public void onSuccess (User user, int loginType) { 
// TODO 登录 成 功 处 理 
ToastUtil.showLong (getApplicationContext (), "登录 成 功 user: " + 

user.getUserName () ) ; 

OnLogin (0, user.getUserName () ) 7 


} 

Override 

public void onError (int loginType) { 
Toast .makeText (getApplicationContext (), "登录 失败 "， Toast .LENGTH SHORT) . show () ; 
OnLogin (0, "登陆 失败 ") ; 



































如 果 登 录 成 功 ， 将 用 户 名 作为 参数 ， 调 用 OnLogin 函 数 ; 如 果 登 录 失 败 ， 则 传 入 “登录 失败 ”四 个 字 。 编 译 运 行 ， 打 包 到 手机 上 。 当 我 们 点 击 按钮 时 ， 会 弹出 机 锋 的 登录 框 。 成 功 登录 后 ， 会 将 用 户 名 
设置 为 文本 ， 显 示 出 来 。 























10.5 小 结 


























本 章 介绍 了 一 般 接 入 SDK 的 流程 。 通 过 登录 接 入 例子 ， 展 示 了 如 何 使 用 JNI， 将 Cocos2D-X 的 C++ 代 码 和 SDK 的 Java 代 码 连 接 起 来 。 通 过 点 击 按钮 ， 调 用 SDK 的 登录 模块 ， 展 示 了 C+ + 如 何 调用 Java 代 
码 。 通 过 将 用 户 登录 后 的 状态 在 Cocos2D-X 中 显示 出 来 ， 展 示 如 何 通过 java 调用 C++ 的 逻辑 。 熟 练 掌握 这 些 操作 ， 可 以 应 对 大 部 分 Android 平 台 上 的 SDK 接 入 。 










































































第 11 章 App Store 支 付 接 入 





从 整个 手机 市 场 来 看 ， 目 前 盈利 最 多 的 平台 是 苹果 的 App Store。 想 要 将 自己 开发 的 游戏 放 到 App Store 上 ， 就 要 按照 苹果 公司 制定 的 流程 提出 申请 。 苹 果 公 司 会 依照 标准 进行 审核 。 通 常 来 说 ， 有 些 提 
交 申 请 会 因为 游戏 某 些 地 方 不 合 标准 被 驳回 。 修 改 后 再 提交 ， 直 到 审核 通过 ， 我 们 的 游戏 就 可 以 出 现在 App Store 上 了 。 





















































另外 ， 目 前 主流 游戏 都 采用 IAP (In-App-Purchase) ， 即 应 用 内 支付 ， 为 游戏 设计 收费 点 。 与 直接 购买 游戏 相 比 ， 采 用 IAP 形 式 的 游戏 能 够 吸引 更 多 的 玩家 ， 而 且 收 费 点 设计 得 合理 ， 能 够 产生 更 大 的 
利润 。 

















这 一 章 我 们 就 来 看 看 ， 如 何在 App Store 上 创建 一 个 自己 的 游戏 ， 并 为 这 个 游戏 接 入 应 用 内 支付 。 





11.1 REMA 
































相对 于 有 着 各 种 应 用 下 载 渠 道 的 Android， 苹 果 设 备 只 能 使 用 App Store 进 行 应 用 发 布 。 抛 开 越狱 渠道 不 谈 ， 我 们 来 看 一 下 如 何 将 我 们 的 应 用 接 入 苹果 商店 。 



































当然 ， 首 先 需 要 购买 一 个 苹果 的 开发 者 账号 ， 具 体 购买 流程 大 家 可 以 查阅 苹果 的 官方 文档 ， 这 里 不 复述 。 




















登录 开发 者 中 心 后 ， 选 择 右 侧 “iTuns Connect” 登 录 。 在 接 下 来 的 页 面 中 选择 “Manage Your Apps”， 进 入 应 用 管理 界面 ， 如 图 11-1 所 示 。 


é iTunes Connect 


Application Loader 2.9.1 
Application Loader helps you to prepare and submit your apps to the App Store. You can also use this tool to create In-App Purchases for your apps. 
Application Loader is part of Xcode 5.1 and is also available for download separately from the Manage Your Apps module on iTunes Connect. 


The 2.9.1 update is recommended for all Application Loader users and contains general bug fixes. 


For detailed information on this update, see the Application Loader guide in the Manage Your Apps module. 


Sales and Trends ES Manage Your Apps 
View and download your sales and trends information. Add, view, and manage your App Store apps. 


Contracts, Tax, and Banking 
Manage your contracts, tax, and banking information. Grow Your Business With iAd 
Monetize your apps and drive downloads. 


Payments and Financial Reports 
View and download your earnings, payments, and financial 
reports. 


Catalog Reports 
Request catalog reports for your App Store content. 


Manage Users m Support 


Add, view, and manage iTunes Connect users and In-App Get support with creating, submitting, and managing your App 
Purchase test accounts. Store apps. 


Access the Developer Guide. ?> FAQ Review our answers to common inquiries. 
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11-1 管理 界面 














在 管理 页 面 中 ,我们 能 够 看 到 已 有 的 应 用 及 它 现在 的 状态 等 信息 。 我 们 新 建 一 个 应 用 ， 点 击 左 上 角 的 “Add New App”， 如 图 11-2 所 示 。 





Manage Your Apps 


Recent Activity See All © 
iOS App Recent Activity 1 Total 








11-2 应 用 信息 











点 击 “Add New App” 后 进入 添加 界面 ， 输 入 相关 信息 ， 如 图 11-3 所 示 。 





é iTunes Connect 


App Information 


Enter the following information about your app. 


Default Language | Simplified Chinese 





App Name [ 动 松 游戏 


SKU Number cocos2d-xTest 





Bundle ID | Xcode iOS Wildcard App ID - * 


You can register a new Bundle ID here. 
Bundle ID Suffix com.fansy 


Your Bundle ID com.fansy 


A Note that the Bundle ID cannot be changed if the 
first version of your app has been approved or if you 
have enabled Game Center or the iAd Network. 


Does your app have specific device requirements? Learn more 


11-3 信息 界面 




















其 中 的 默认 语言 和 程序 名 称 就 不 解释 了 。 “SKU Number" Stock Keeping Unit 的 缩写 。 在 有 很 多 应 用 时 ， 为 一 个 应 用 指定 一 个 唯一 的 货号 ， 这 样 可 以 方便 管理 应 用 库 。 货 号 可 以 使 用 任意 值 ， 因 为 
作为 应 用 的 唯一 标示 ， 它 不 能 与 其 他 应 用 重复 。 可 以 点 击 “You can register a new Bundle ID” 后 面 的 “here” 连 接 处 注册 一 个 Bundle ID 号。 选用 的 “Bundle ID” 与 下 一 节 在 开发 者 授权 系统 中 创建 证 


书 时 使 用 的 ID 必须 一 致 ， 否 程序 无 法 上 传 。 


































































































点 击 “Continue”， 更 改 应 用 的 发 布 信息 。 在 这 里 我 们 将 发 布 信息 的 日 期 更 改 为 6 月 1 号 ， 在 “Price Tier” 后 面 的 下 拉 菜 单 中 选择 Free， 将 应 用 设置 为 免费 ， 如 图 11-4 所 示 。 


























é iTunes Connect 
劲松 游戏 


Select the availability date and price tier for your app. 


Availability Date | o6/Jun :| 1 + || 2014 3 


Price Tier | Free 


View Pricing Matrix > 
Discount for Educational Institutions 7 


Custom B2B App 


Unless you select specific territories, your app will be for sale in all App Store Volume Purchase 
Programs for Business worldwide. 


<= 


图 11-4 发布 日 期 


















































点 击 “Continue”， 然 后 在 下 一 个 页 面 中 填写 应 用 的 详细 信息 。 编 辑 好 一 些 基 本 的 信息 就 能 够 看 到 应 用 成 功 生成 了 。 这 时 应 用 的 状态 是 “Prepare for Upload”， 如 图 11-5 所 示 。 
































é iTunes Connect 


App Information 


Identifiers Links 


Manage Came Center 


SKU core Ven in aop sire 


Contact Us ET : 
Bundle ID com.fansy Newsstand Status 


Rights a cing 

Apple ID 855118888 Rights and Pricing 
ype App Set Up iAd J stwork 

P ios Set Up iAd App Netwo 


Default Language Simplified Chinese 


Versions 


Current Version 


Version 1.0 


Status © Prepare for Upload 


Date Created Apr 4, 2014 


View Details 





图 11-5 生成 应 用 





出 现 这 样 的 界面 表示 我 们 的 应 用 已 经 创建 完成 。 


11.2 ”生成 授权 

苹果 对 其 设备 有 严格 的 使 用 限制 ， 任 何 应 用 程序 都 必须 从 App Store 下 载 安装 ， 没 有 经 过 破解 的 设备 没有 办 法 直接 安装 我 们 编辑 的 程序 ， 或 对 程序 进行 调试 。 另 一 方面 ， 苹 果 也 提供 了 一 套 面向 开发 者 
的 授权 机 制 ， 让 开发 者 可 以 在 产品 上 线 之 前 在 指定 的 设备 上 运行 和 调试 。 

使 用 开发 者 授权 可 以 分 为 下 面 几 个 阶段 : 

1) 授权 设备 。 将 开发 者 授权 的 设备 注册 到 苹果 账户 中 ， 人 允许 这 些 设备 自由 安装 开发 者 发 布 的 IPA。 

2) 生成 授权 文件 。 这 个 文件 会 被 打包 进入 IPA， 实 现 设备 与 授权 开发 账号 的 绑 定 。 


3) 生成 证 书 文件 ， 这 个 文件 也 会 被 打包 进入 IPA， 实 现 应 用 发 行商 的 签名 以 及 身份 验证 。 


开发 者 授权 系统 还 提供 了 开发 (Development) 版 本 和 发 布 (Distribution) 版 本 。 在 开发 测试 的 时 候 需 要 绑 定 特定 设备 ， 而 在 发 布 的 时 候 则 不 需要 绑 定 设备 。 所 以 开发 与 发 布 需要 使 用 不 同 
的 .mobileprovision 与 .cer 文 件 。 在 正式 发 布 时 ， 不 要 忘记 切换 证 书 。 下 面 我 们 看 看 如 何 准 备 这 些 证 书 。 


11.2.1 授权 设备 


首先 ， 我 们 在 打开 的 苹果 开发 中 心 页 面 中 找到 “Certificates，ldentifiers&Profiles” ， 点 击 进入 证 书 管理 界面 ， 如 图 11-6 所 示 。 


件 。 


@ Developer Tonoa 


Resources Programs Support Member Center 





Certificates, Identifiers & Profiles 


ee = ™= 





& Certificates 
® All 


® Pending 


® Production 


(iD) Identifiers 
© App IDs 
® Pass Type IDs 
® Website Push IDs 


Devices 
a All 


Provisioning Profiles 
eal 

© Development 

© Distribution 


OS Certificates ( 
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图 11-6 证 书 管理 界面 


点 击 Development， 然 后 在 开发 界面 中 点 击 右 侧 的 “+” ， 添 加 一 个 证 书 。 在 刷新 的 页 面 中 选择 “Development” 下 的 “ios App Development”。 点 击 下 一 步 ， 在 接 下 来 的 页 面 中 会 提示 需要 上 传 
设备 请 求证 书 。 


以 Mac 为 例 ， 打 开 “ 钥 匙 捉 访问 ”， 点 击 菜单 中 “钥匙 捉 访问 ”-> “证 书 助理 ” 


注意 ”请 求证 书 与 设备 相关 ， 不 可 以 从 其 他 人 的 电脑 上 复制 。 


-> “从 证 书 颁发 机 构 请 求证 书 ”， 在 弹出 的 对 话 框 中 输入 邮箱 ， 在 下 面 选 择 存储 到 磁盘 ， 这 样 就 生成 了 一 个 请 求证 书 文 


在 上 传 证 书 的 页 面 中 上 传 我 们 生成 的 证 书 文件 。 成 功 后 就 可 以 下 载 苹果 生成 的 证 书 了 ， 如 图 11-7 所 示 。 这 个 证 书 就 是 我 们 需要 的 授权 证 书 。 


é Developer Technologies Resources Programs Support Member Center Q Search Develope 


Certificates, Identifiers & Profiles 


iOS Apps Add iOS Certificate 


& Certificates Select Type Request Generate Download 
5 All 
© Pending 


@ s . 
aS Your certificate is ready. 


® Production 


10) Identifiers 


wy he Download, Install and Backup 


Pass Type IDs Download your certificate to your Mac, then double click the .cer file to install in Keychain 
= Website Push IDs Access. Make sure to save a backup copy of your private and public keys somewhere secure. 


D Devices 
5 All Name: iOS Development 
Type: iOS Development 


b isioning Profi 
a) race Me Expires: 四 月 04, 2015 


All 


oe 


Distribution 


Documentation 
For more information on using and managing your certificates read: 


App Distribution Guide 


Add Another 





图 11-7 生成 证 书 


点 击 Download 即 可 下 载 证 书 。 


11.2.2 ”生成 授权 文件 





有 了 证 书 ， 我 们 就 可 以 申请 授权 文件 了 。 点 击 左下 角 的 “Provisioning Profiles” 中 的 “Development”， 在 进入 的 界面 中 点 击 右上 和 角 的 “+” 添 加 一 个 文件 ， 如 图 11-8 所 示 。 








é Developer Technologies Resources Programs Support Member Center (Q, Search Developer 





Certificates, Identifiers & Profiles 





iOS Apps iOS Provisioning Profiles (Development) 


k Certificates 


© All 





® Pending 
® Development 


® Production 





由 Identifiers 
© App IDs 
® Pass Type IDs 
© Website Push IDs 


D Devices 
© All 


[b Provisioning Profiles 
© All 
= Development 


® Distribution 














11-8 证 书 管理 界面 





在 出 现 的 界面 中 选择 开发 类 型 “IOS App Development” ， 点 击 继续 ， 然 后 在 App 1D 下 拉 框 中 选择 11.1 节 设置 的 “Bundle ID”， 如 图 11-9 所 示 。 








é Developer Technologies Resources Programs Support Member Center (Q Search Developer 





Certificates, Identifiers & Profiles 


iOS Apps Add iOS Provisioning Profile E3IC3 





Certificates Select Type Configure 
B All 


a Pendin s 
i Eh Select App ID. 


© Development PROV 


B Production 


Jo Identifiers 


© App IDs If you plan to use services such as Game Center, In-App Purchase, and Push Notifications, 
or want a Bundle ID unique to a single app, use an explicit App ID. If you want to create one 
provisioning profile for multiple apps or don't need a specific Bundle ID, select a wildcard 
© Website Push IDs App ID. Wildcard App IDs use an asterisk (*) as the last digit in the Bundle ID field. Please 
note that iOS App IDs and Mac App IDs cannot be used interchangeably. 


B Pass Type IDs 


D Devices 
a All 





App ID: com-fansy (Z3TAH4W2YL.com.fansy) 





|) Provisioning Profiles 
B All 
= Development 


® Distribution 











图 11-9 设置 Bundle ID 


如 果 你 此 时 还 未 创建 应 用 或 没有 对 应 的 App ID， 可 以 选择 “XCode iOS Wildcard App ID”。 在 以 后 项 目 配置 时 再 设置 。 点 击 Continue 继 续 。 


选择 对 应 的 证 书 ， 再 点 击 Continue 继 续 。 然 后 选择 设备 作为 安装 目标 设备 ， 如 图 11-10 所 示 。 





Certificates, Identifiers & Profiles 


iOS Apps Add iOS Provisioning Profile 





x Certificates Select Type Configure 
a All 
a Pending we 
Select devices. 
© Development PROV 


a Production 


00 Identifiers 


© App IDs Select the devices you wish to include in this provisioning profile. To install an app signed with 
this profile on a device, the device must be included. 
© Pass Type IDs 


© Website Push IDs @ Select All 10 of 10 item(s) selected 


日 Devices A 
S All 


|) Provisioning Profiles 
5 All 
= Development 


© Distribution 
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图 11-10 设置 设备 


然后 ， 在 下 一 页 输入 项 目的 名 字 ， 检 查 信息 无 误 ， 点 击 生成 按钮 ， 如 图 11-11 所 示 。 


wy Developer 


Technologies Resources Programs Support Member Center 


Certificates, Identifiers & Profiles 


iOS Apps 


© Certificates 
All 
Pending 
Development 


Production 


identifiers 
App IDs 
Pass Type IDs 
Website Push IDs 


O Devices 
All 


已 Provisioning Profiles 
All 
Development 


Distribution 


生成 后 ， 我 们 就 可 以 使 用 证 书 了 。 


11.23 ”运行 项 目 








Add iOS Provisioning Profile 


Select Type Configure Generate 


eS Name this profile and generate. 


PROV 


The name you provide will be used to identify the profile in the portal. You cannot use special 
characters such as @, &, *, ', " for your profile name. 


Profile Name: = MyTest 


Type: Development 
App ID: com-fansy (Z3TAH4W2YL.com.fansy) 
Certificates: 1 Included 


Devices: 10 Included 


) 





图 11-11 生成 证 书 


我 们 创建 一 个 名 为 “iosGame” 的 工程 。 打 开 XCode， 在 新 建 的 项 目 配置 中 找到 “General”-> “Identity” , ¥ “Bundle Identifier” 前 缀 更 改 为 “com.fansy”， 并 在 下 面 的 “Team” 中 填写 登录 





账号 ， 如 图 11-12 所 示 。 





À iosGame iOS $ 


Vv Identity 


我 们 会 发 现 ， 后 面 的 尾 缀 依然 存在 ， 





General Capabilities Info Build Settings Build Phases 


Bundle Identifier com.fansy.iosGame-iOS 


Version | 











Build | 1.0 


Team 





图 11-12 设置 项 目 


因此 还 要 切换 到 Info 中 ， 将 名 称 生成 规则 改 掉 ， 如 图 11-13 所 示 。 





im | < > | B iosGame 





General 


[=] Å iosGame iOS $ 


Capabilities 


Y Custom iOS Target Properties 


Key 
Bundle versions string, short 
Bundle identifier 
InfoDictionary version 

>» CFBundlelconFiles~ipad 
Bundle version 
Executable file 


Application requires iPhone environment 


> Icon files 
> Fonts provided by application 


去 掉 产 品名 的 尾 缀 后 ， 我 们 的 “Bundle identifier” 就 与 设置 的 一 致 了 。 


Info Build Settings 


Type 
String 
String 
String 
Array 
String 
String 
Boolean 
Array 
Array 





4h 4h ah ar FF 4 4 Ou 


图 11-13 更 改 项 目 配置 


Build Phases Build Rules 


6.0 

(15 items) 

1.0 
${EXECUTABLE_NAME} 
YES 

(10 items) 

(0 items) 


设置 好 后 即 可 连接 设备 。 当 设备 连接 电脑 时 ， 设 备 上 会 弹出 “要 信任 此 电脑 ”的 对 话 框 ， 点 击 “ 信 任 ”， 稍 等 片刻 ， 设 备 就 会 连接 到 Xode 上 。 


更 改 Xcode 左 上 角 的 项 目 目标 ， 将 其 设 为 我 们 的 设备 。 如 果 这 个 设备 未 添加 到 我 们 的 授权 设备 中 ，XCode 会 提示 警告 ， 点 击 修复 即 可 。 


最 后 点 击 运 行 项 目 即 可 看 到 新 建 的 Cocos2D-X 项 目 在 我 们 的 机 器 上 运行 起 来 了 。 





11.3 ”创建 商品 


应 用 程序 内 购买 简称 为 IAP (In-App Purchase) 。 随 着 道具 付费 的 游戏 越 来 越 多 ， 玩 游戏 免费 ， 道 具 付费 的 模式 也 逐渐 成 熟 。 这 一 节 我 们 来 看 看 如 何 接 入 一 个 付费 道具 。 




















App Information TD 
Identifiers 
SKU cocos2d-xTest 
Bundle ID com.fansy 
Apple ID 855118888 


Type iOS App 


Default Language Simplified Chinese 


在 接 下 来 的 界面 中 点 击 左 上 角 的 “Create New" 
15 所 示 。 


首先 登录 到 “iTunse Connect”， 打 开 我 们 的 游戏 ， 在 基本 信息 界面 右 侧 点 击 “Manage In-App Purchase” , 


Links 





如 图 11-14 所 示 。 





View in App Store 


Contact Us 


图 11-14 ”支付 管理 界面 





， 会 弹出 商品 类 型 选择 界面 ， 其 中 有 很 多 种 类 型 的 内 支付 产品 供 我 们 选择 ， 每 种 商品 下 面 都 有 详细 的 说 明 ， 这 里 我 们 选择 “Consumable”， 如 图 11- 





选择 后 就 进入 了 信息 编辑 界面 。 在 “In-App purchase Summary” 一 栏 中 填写 名 字 和 ID。 名 字 只 会 显示 在 “iTunes Connect” 中 ， 不 会 显示 在 App Store, Produce ID, 


程序 识别 的 唯一 ID。 


劲松 游戏 一 In-App Purchases 


Select Type 


Learn more about selling products with In-App Purchases. 


Consumable 


A consumable In-App Purchase must be purchased every time the user downloads it. One-time services, such as fish food ina 
fishing app, are usually implemented as consumables. 


Non-Consumable 
Non-consumable In-App Purchases only need to be purchased once by users. Services that do not expire or decrease with use 
are usually implemented as non-—consumables, such as new race tracks for a game app. 


Auto-Renewable Subscriptions 
Auto-renewable Subscriptions allow the user to purchase updating and dynamic content for a set duration of time. 
Subscriptions renew automatically unless the user opts out, such as magazine subscriptions. 


Free Subscription 

Free subscriptions are a way for developers to put free subscription content in Newsstand. Once a user signs up for a free 
subscription, it will be available on all devices associated with the user's Apple ID. Note that free subscriptions do not expire 
and can only be offered in Newsstand-enabled apps. 





图 11-15 商品 类 型 选择 


























Select the In-App Purchase type you want to create. If a type is missing, make sure you have agreed to all recent contracts. The Legal 
user must go to the "Contracts, Tax, and Banking” module on iTunes Connect to agree to the latest Paid Applications agreement. You 
must agree to the Developer Program License Agreement before you can access the Paid Applications agreement. To help ensure that 
your app is not vulnerable to fraudulent In-App Purchases, review the In-App Purchase Receipt Validation documentation. 


来 标识 这 个 商品 ， 也 是 供 


iit “Pricing and Availability” 中 的 “Price Tier” 可 以 设置 产品 的 价格 。 点 击 下 拉 框 会 出 现 许 多 价格 数字 ， 它 们 都 以 美元 为 单位 ， 按 当前 汇率 兑换 成 各 国 的 货币 ， 因 此 所 有 的 价格 都 是 美元 ， 最 少 也 
只 能 是 0.99 美 元 。 第 三 列 是 苹果 收取 分 成 后 我 们 能 够 获得 的 实际 钱 数 。 如 图 11-16 所 示 。 








iTunes Connect 


劲松 游戏 一 In-App Purchases 


In-App Purchase Summary 


Enter a reference name and a product ID for this In-App Purchase. You must also add at least one language, along with a display name and a 


description in that language. 


Reference Name: 


仙 豆 


Product ID: Seed 


Pricing and Availability 


Enter the pricing and availability details for this In-App Purchase below. 


Cleared for Sale Yes@) No 


Price Tier 


Tier 1 


View Pricing Matrix 


Canada 


U.K. 


European Union” 





图 11-16 ”价格 选择 


Price Tier 1 
Customer Price 
USS0.99 
$13.00 
CAS0.99 
£0.69 


0,89€ 





Your Proceeds 


US$0.70 


$9.10 


CAS0.70 


£0.42 


0,54€ 


填 好 这 些 属 性 后 ， 我 们 再 编辑 “In-App Purchase Details”。 点 击 “AddLanguage”， 在 弹出 的 对 话 框 中 编写 详细 信息 。 编 辑 好 后 保存 ， 会 添加 一 项 描述 ， 如 图 11-17 所 示 。 


In-App Purchase Details 


Language 





Details for this In-App Purchase are shown below. You must provide at least one language at all times. 


Add Language 


Simplified Chinese 传说 中 的 仙 豆 


图 11-17 ”编辑 描述 


吃 掉 一 颗 ， 就 能 够 瞬间 恢复 战斗 力 ! 





点 击 页 面 下 方 的 “Screenshot for Review” 按 钮 ， 为 商品 添加 一 张 截 图 。 以 上 都 编辑 完成 后 ， 点 击 右 下 角 的 “Save” 来 保存 商品 信息 。 保 存 成 功 后 会 回 到 支付 信息 的 界面 中 。 在 这 里 ， 我 们 能 够 看 到 


刚才 添加 商品 。 此 商品 的 状态 是 “Ready to Submit” ， 说 明 我 们 创建 正确 ， 如 





图 11-18 所 示 。 


iTunes Connect 





劲松 游戏 


Apple ID : 855118888 Bundle ID : com.fansy 


The first In-App Purchase for an app must be submitted for review at the same time that you submit an app version. You must do this on the Version Details 
page. Once your binary has been uploaded and your first In-App Purchase has been submitted for review, additional In-App Purchases can be submitted 
using the table below. 





856715529 @ Ready to Submit 


View or generate a shared secret 





图 11-18 创建 商品 完成 


进入 到 应 用 信息 界面 ， 点 选 “View Details” ， 然 后 在 下 面 的 选项 中 找到 “In-App Purchases” 项 ， 点 击 Edit 进 行 编辑 ， 如 图 11-19 所 示 。 


Contact Information 


App Review Contact Information 
First Name Fansy 
Last Name fansy 
Email Address fan@email.com 
Phone Number 1234567 


Review Notes (Optional) 


Demo Account Information (Optional) 


Username 


Password 


In-App Purchases 


You have not yet selected any In-App Purchases to be reviewed with this version. To do so, click Edit. 


EULA G2 


Currently, the standard End User License Agreement (EULA) is being applied to your app. If you want to provide your own EULA, click Edit. 





图 11-19 ”编辑 内 支付 
注意 在 目前 每 个 版 本 中 ， 内 支付 的 商品 类 型 只 能 提交 一 次 且 不 可 以 更 改 ， 因 此 应 将 所 有 商品 创建 完成 再 执行 此 操作 。 


点 击 Edit 后 ,会 弹出 选择 商品 对 话 框 ， 在 对 话 框 中 弥 选 我 们 的 商品 ， 点 击 Save 保 存 ， 如 图 11-20 所 示 。 


Edit In-App Purchases 


Select In-App Purchases for review with this app version. The In-App Purchases shown below are the only ones in 


the Ready to Submit state. Free subscriptions in the Ready to Submit state will only be shown here if your app 


version has been enabled for Newsstand. 


仙 豆 


C 


图 11-20 提交 支付 商品 


最 后 点 击 页 面 右 下 角 的 “Ready to Upload Binary”。 成 功 更 改 状态 后 ， 我 们 再 看 商品 的 状态 变 为 “Waiting for Review" . 


至 此 ， 商 品 就 正式 创建 完成 了 ， 我 们 也 可 以 在 接 下 来 的 测试 中 取得 该 商品 。 


注意 ”有 时 商品 信息 的 更 新 有 延 时 ， 创 建 商品 成 功 后 并 不 能 立刻 取得 商品 。 


114 NEE 





有 了 创建 好 的 商品 ， 这 节 将 实现 在 程序 中 购买 它 。 我 们 要 做 工作 是 从 Cocos2D-X 的 C++ 代码 中 调用 Objective-C 的 接口 代码 ， 从 而 实现 对 原生 库 的 访问 ， 进 而 访问 苹果 的 服务 购买 商品 。 




















i | 可 > 


Ph iosGame 





首先 我 们 在 项 目 配置 的 “Build Phases” HEK “Link Binary With Libraries”。 点 击 这 个 标签 最 下 方 的 加 号 ,添加 “StoreKit.framework”， 如 图 11-21 所 示 。 





D] zr losGame iOS $ 


General Capabilities 


> Target Dependencies (5 items) 


> Copy Bundle Resources (19 items) 


> Compile Sources (5 items) 


Y Link Binary With Libraries (16 items) 


之 后 ， 我 们 新 建 一 个 Objective-C 的 类 iosPay， 作 为 我 们 支付 的 声明 文件 。 创 建 好 这 个 类 后 会 有 “iosPay.h” 和 “iosPay.m” 两 个 文件 。 由 了 


Name 

@ StoreKit.framework 

fy libbox2d iOS.a 

By libchipmunk iOS.a 

fee libcocos2dx iDS.a 

fs libcocos2dx-extensions iDS.a 

fy libCocosDenshion iOS.a 

@ CoreMotion. framework 

@ Foundation.framework 
UIKit.framework 

@ CoreGraphics.framework 
OpenGLES.framework 
libz.dylib 

@ QuartzCore.framework 

@ OpenAL.framework 

@ AVFoundation.framework 

@ AudioToolbox.framework 

oe wa 


的 尾 缀 更 改 为 .mm， 以 实现 与 C++ 混 编 。 


Info 








图 








11-21 


Build Settings Build Phases Build Rules 





Q 





Drag to reorder frameworks 


增加 支付 库 


Status 

Required * 
Required $ 
Required $ 
Required $ 
Required $ 
Required $ 
Required * 
Required $ 
Required $ 


Required $ 
Required $ 
Required $ 


Required $ 
Required $ 
Required * 
Required $ 





我 们 在 实现 的 过 程 中 调用 C++ 代码 ， 所 以 此 处 应 将 .:m 文 件 


Choose a template for your new file: 


Cocoa Touch + A 
Cand C++ | — — 
User Interface s 

Objective-C class Objective-C protocol 
Core Data extension 
Resource 
Other 


Cand C++ 
User Interface 
Core Data 
Resource 
Other 


上 Objective-C class 


ABEJ 


An Objective-C class, with implementation and header files. 


Previous Next 





图 11-22 ”创建 Objective-C 文 件 
更 改 “iosPay.h”， 如 代码 清单 11-1 所 示 。 


代码 清单 11-1 支付 声明 





#import <Foundation/Foundation.h> 

#import <StoreKit/StoreKit.h> 

@class ViewController; 

@interface iosPay : NSObject<SKPaymentTransactionObserver, SKProductsRequestDelegate> 
@property (nonatomic, readwrite, strong) ViewController* viewController; 

+ (iosPay *)getInstance; 

- (void) initStoreKit; 

- (void)purchaseItem: (NSString*) identifier; 

@end 





篇 幅 有 限 ， 这 里 不 对 Objective-C 代 码 进行 详细 解释 ， 有 不 明白 的 地 方 可 以 查阅 关于 1OS 语 法 的 资料 。 此 处 代码 可 以 简单 地 理解 为 ， 定 义 了 一 个 单 例 对 象 ， 它 有 一 个 初始 化 方法 和 一 个 提交 购买 商品 的 方 
法 。 


接 下 来 我 们 实现 对 应 的 购买 方法 ， 如 代码 清单 11-2 所 示 。 


代码 清单 11-2 ”购买 实现 





#import "iosPay.h" 

#import "HelloWorldScene.h" 
@implementation iosPay 

+ (iosPay *)getInstance 

{ 


static iosPay *pay = nil; 
static dispatch_once_t onceToken; 
dispatch_once(&onceToken, ^{ 
pay = [[super alloc] init]; 
[pay initStoreKit]; 
We 
return pay; 


- (void) initStoreKit 
{ 
[[SKPaymentQueue defaultQueue] addTransactionObserver: self]; 


- (void)purchaseItem: (NSString *) identifier 
{ 


SKProductsRequest *request= [[SKProductsRequest alloc] initWithProductIdentifiers: 
[NSSet setWithObject: identifier]]; 
request.delegate = self; 
[request start]; 
} 
- (void)productsRequest: (SKProductsRequest *)request didReceiveResponse: ( 
SKProductsResponse *) response 
{ 
NSArray *myProduct = response.products; 
if (myProduct.count == 0) { 
NSLog(@"Fail Can't find Product invalidProductIdentifiers 
= %@", response. invalidProductIdentifiers) ; 


return; 
} 
NSArray* transactions = [SKPaymentQueue defaultQueue] .transactions; 
if (transactions.count > 0) { 
NSLog (@"rePurchaseht tp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/14903/OEBPS/Text/...")7 


SKPaymentTransaction* transaction = [transactions firstObject]; 
if (transaction.transactionState == SKPaymentTransactionStatePurchased) { 


[self completeTransaction:transaction]; 

[[SKPaymentQueue defaultQueue] finishTransaction:transaction] ; 

return; 

} 

} 
NSLog (@"Purchasehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14903/0EBPS/Text/..."); 
SKPayment * payment = [SKPayment paymentWithProduct:myProduct[0]]; T 
[ [SKPaymentQueue defaultQueue] addPayment:payment] ; 


(void) paymentQueue: (SKPaymentQueue *)queue updatedTransactions: (NSArray *)transactions 


gh j 


NSLog (@"receive call back"); 
for (SKPaymentTransaction *transaction in transactions) { 
switch (transaction.transactionState) { 
case SKPaymentTransactionStatePurchased: 
[self completeTransaction: transaction]; 
break; 
case SKPaymentTransactionStateFailed: 
NSLog (@"Fail error.code:%d", (int) transaction.error.code) ; 
[[SKPaymentQueue defaultQueue] finishTransaction: transaction]; 
break; 
case SKPaymentTransactionStateRestored: 
NSLog (@"restored") ; 
[self completeTransaction: transaction]; 
break; 
default: 
break; 


} 


(void) completeTransaction: (SKPaymentTransaction*) transaction 


ay joss 


NSLog (@"Success") 7 
NSString* iden = transaction.transactionIdentifier; 
std::string idens = [iden UTF8String]; 
auto current = cocos2d::Director: :getInstance () ->getRunningScene () ; 
for (auto layer : current->getChildren()) 
{ 
auto hello = dynamic_cast<HelloWorld*> (layer) ; 
if (hello) 
{ 


hello->setInfo (idens) ; 
} 


[[SKPaymentQueue defaultQueue] finishTransaction: transaction]; 
} 
Qend 
































最 后 我 们 来 更 改 调用 方式 。 为 了 能 够 调用 Objective-C 代 码 ， 我 们 要 将 HelloWorld.cpp 更 改 为 “HelloWorld.mm”“” , Æ 
后 ， 再 更 改 代码 如 代码 清单 11-3 所 示 。 

















尾 缀 为 “.mm” 的 文件 才能 实现 C++ 和 Objective-C 的 混 编 。 更 改 文件 名 


代码 清单 11-3 ”购买 调用 





#include "HelloWorldScene.h" 
#import "iosPay.h" 


USING_NS_CC; 
Scene* HelloWorld: :createScene () 
{ 


// 'scene' is an autorelease object 
auto scene = Scene: :create(); 

// ‘layer' is an autorelease object 
auto layer = HelloWorld: :create(); 
// add layer as a child to scene 
scene->addChild (layer) ; 

// return the scene 

return scene; 


} 
bool HelloWorld: :init() 
{ 
if ( !Layer::init() ) 


return false; 


cocos2d::Size visibleSize = Director: :getInstance ()->getVisibleSize (); 
cocos2d::Point origin = Director: :getInstance()->getVisibleOrigin (); 
auto closeItem = MenuItemImage: :create ( 
"CloseNormal.png", 
"CloseSelected.png", 
CC CALLBACK 1 (HelloWorld: :menuCloseCallback, this) ); 
closeItem->setPosition (cocos2d::Point (origin.x + visibleSize.width - 
closeItem->getContentSize().width/2 , 
origin.y + closeItem->getContentSize() .height/2)); 
auto menu = Menu: :create(closeItem, NULL); 
menu->set Position (cocos2d: : Point: : ZERO) ; 
this->addChild(menu, 1); 
auto label = LabelTTF::create ("Hello World", "Arial", 24); 
label->setTag (100) ; 
label->setPosition (cocos2d: :Point (origin.x + visibleSize.width/2, 
origin.y + visibleSize.height - label->getContentSize() .height) ); 
this->addChild(label, 1); 
auto sprite = Sprite: :create ("HelloWorld.png") ; 
sprite-—>setPosition (cocos2d: : Point (visibleSize.width/2 + 
origin.x, visibleSize.height/2 + origin.y)); 
this->addChild(sprite, 0); 
return true; 


} 

void HelloWorld: :setInfo (std::string info) 

{ 
auto label = dynamic_cast<LabelTTF*>(getChildByTag (100) ) ; 
label->setString (info) ; 


} 
void HelloWorld: :menuCloseCallback (Ref* pSender) 
{ 

[[iosPay getInstance] purchaseItem:@"Seed"]; 
} 









































调用 getinstance 函 数 能 够 取 到 支付 模块 的 实例 ， 调 用 该 实例 中 的 purchaseltem， 将 商品 名 作为 参数 传 入 ， 即 可 调用 苹果 的 支付 模块 。 














代码 编辑 完成 后 ， 我 们 就 可 以 在 真 机 上 进行 调试 了 。 


11.5 ”测试 支付 























测试 支付 需要 用 指定 的 测试 账号 ， 而 整个 支付 流程 也 是 在 沙 盒 (Sandbox) 中 进行 的 。 接 下 来 我 们 来 看 看 如 何在 沙 盒 中 进行 测试 。 测 试 效果 如 图 11-23 所 示 。 











请 确认 您 的 软件 内 购买 
您 想 以 ¥6.00 的 价格 买 一 个 传说 中 的 仙 
豆 吗 ? 


[Environment: Sandbox] 


购买 





图 11-23 测试 支付 























我 们 要 为 应 用 创建 测试 账号 。 这 个 账号 是 真实 的 苹果 账号 ， 但 苹果 公司 不 许 开发 者 在 应 用 外 使 用 这 些 账 号 。 























首先 登录 “iTunes Connect” ， 点 选 左下 角 的 “Manage Users”， 登 录 页 面 如 图 11-24 所 示 。 





Application Loader 2.9.1 
Application Loader helps you to prepare and submit your apps to the App Store. You can also use this tool to create In-App Purchases for your apps. 
Application Loader is part of Xcode 5.1 and is also available for download separately from the module on iTunes Connect. 


The 2.9.1 update is recommended for all Application Loader users and contains general bug fixes. 


For detailed information on this update, see the Application Loader guide in the module. 


View and download your sales and trends information. Add, view, and manage your App Store apps. 


Manage your contracts, tax, and banking information. 


Monetize your apps and drive downloads. 


View and download ings ts, and financial l 
ier ee ee ee oe t Request catalog reports for your App Store content. 


Add, view, and manage ITunes Connect users and In-App 


Get support with creating, submitting, and managin ur A 
Purchase test accounts. ppo! g g ging your App 


Store apps. 


Review our answers to common inquiries. 





图 11-24 登录 页 面 














然后 在 接 下 来 的 页 面 中 点 选 “Test User”， 进 入 测试 用 户 管理 界面 后 ， 点 选 左上 角 的 “Add New User” 来 创建 新 用 户 。 









































在 接 下 来 的 界面 中 随便 填写 些 信息 ， 创 建 一 个 账号 ， 如 图 11-25 所 示 。 














iTunes Connect 


Manage Test Users 


Email Address 


fansy@cocos2dx.net 





图 11-25 ”增加 测试 用 户 














这 样 我 们 就 可 以 使 用 这 个 账号 进行 测试 了 。 


11.5.2 ” 真 机 测试 


首先 ， 在 我 们 的 设备 中 找到 “设置 ”， 将 我 们 目前 登录 的 苹果 账号 注销 。 然 后 ， 连 接 我 们 的 设备 ， 运 行程 序 。 





注意 ”开发 环境 的 模拟 器 和 越狱 设备 都 无 法 进行 支付 测试 。 














在 程序 运行 起 来 后 ， 点 击 按钮 ， 会 提示 我 们 用 苹果 账号 登录 。 输 入 我 们 的 测试 账号 后 ， 稍 等 片刻 就 会 弹出 购买 商品 的 对 话 框 。 购 买 成 功 后 “HelloWorld” 文 字 会 被 更 改 为 订单 号 。 











11.6 小 结 








这 章 我 们 了 解 了 如 何在 App Store 上 创建 一 个 应 用 ， 以 及 如 何 配置 应 用 的 各 方面 信息 ; 之 后 学 习 了 如 何 创建 开发 证 书 ， 将 它 配置 到 开发 环境 ， 生 成 能 在 真 机 上 进行 调试 的 程序 ， 最 后 学 习 了 如 何在 
Cocos2D-X 程 序 中 接 入 一 个 支付 模块 并 测试 应 用 中 的 商品 购买 流程 。 




















第 12 章 ，” 微 信 社交 分 享 


一 方面 ， 游 戏 市 场 越 做 越 大 ， 同 种 类 型 的 游戏 越 来 越 多 ， 推 广 游戏 的 价格 也 水 涨 船 高 。 另 一 方面 ，SNS 的 兴起 促成 了 圈子 的 价值 不 断 提升 。 综 合 这 些 形势 ， 在 游戏 中 加 入 社交 推广 成 了 一 种 必然 ， 毕 竟 
这 是 一 本 万 利 的 事情 。 这 章 我 来 看 看 如 何在 我 们 的 程序 中 引入 社交 分 享 功能 。 





12.1 开发 环境 搭建 














微 信 拥有 着 大 量 的 用 户 群 ， 令 人 庆幸 的 是 微 信 也 开放 了 公共 接口 ， 允 许 开发 者 在 自己 的 应 用 中 由 入 分 享 到 微 信 的 功能 。 这 节 我 们 将 创建 一 个 Cocos2D-X 的 工程 ， 并 为 其 引入 微 信 的 分 享 组件 。 

















12.1.1 创建 工程 














要 加 入 微 信 分 享 的 功能 ， 我 们 要 先 在 注册 时 申请 为 开发 者 ， 然 后 提交 应 用 等 竺 审核， 审核 通过 后 ， 我 们 会 获得 一 个 ApplD。 





微 信 分 享 的 接 入 与 第 10 章 SDK 的 接 入 有 几 分 相似 之 处 ， 因 此 如 果 没 有 阅读 过 10 章 的 读者 请 先 阅读 第 10 章 。 这 里 也 是 从 Cocos2D-X 的 C+ + 代码 调用 Java 的 功能 模块 ， 然 后 从 Java 再 回调 回来 。 








不 管 怎样 ， 我 们 要 先 创建 一 个 新 项 目 ， 将 其 命名 为 “myShare”。 编 译 运行 确保 新 项 目 正常 。 然 后 更 改 init 函 数 ， 如 代码 清单 12-1 所 示 。 


代码 清单 12-1 更改 主 界面 





bool HelloWorld: :init() 
{ 


W7111111111111111111111111111/ 
// 1. super init first 

if ( !Layer::init() ) 

{ 


return false; 


Size visibleSize = Director: :getInstance ()->getVisibleSize (); 


Point origin = Director::getInstance ()->getVisibleOrigin (); 
auto closeItem = MenuItemImage: :create ( 
"CloseNormal.png", 
"CloseSelected.png", 
CC_CALLBACK_1 (HelloWorld: :menuCloseCallback, this) ) 7 
closeItem->setPosition (Point (origin.x + visibleSize.width/2 一 
closeItem->getContentSize().width/2 ,origin.y t+visibleSize.height/2+ 
closeItem->getContentSize() .height/2)); 
// create menu, it's an autorelease object 
auto menu = Menu: :create(closeItem, NULL); 
menu->set Position (Point: : ZERO) ; 
this->addChild(menu, 1); 
auto label = LabelTTF::create ("Hello World", "Arial", 24); 
label->setPosition (Point (origin.x + visibleSize.width/2, 
origin.y + visibleSize.height - 300)); 
label->setTag (100) ; 
// add the label as a child to this layer 
this->addChild(label, 1); 
return true; 














与 第 10 章 的 接 入 一 样 ， 我 们 也 在 点 击 按钮 时 通过 调用 JNI 进 而 调用 SDK 中 的 模块 。 更 改 点 击 响应 ， 如 代码 清单 12-2 所 示 。 

















代码 清单 12-2 ”更 改 点 击 处 理 





void HelloWorld: :menuCloseCallback (Ref* pSender) 


{ 
#if (CC TARGET PLATFORM == CC PLATFORM ANDROID) 
auto label = dynamic_cast<LabelTTF*> (getChildByTag (100) ) ; 
label->setString ("Call Android"); 
#else 
Director: :getInstance ()->end () ; 
exit (0); 
#endif 
$ 





注意 ”如果 包 中 缺少 NI 的 相关 文件 ， 需 要 手动 从 cocos2d/cocos/2d/platform/android/java/stc 中 将 对 应 的 文件 包 复制 到 工程 中 。 


编译 运行 ， 打 包 到 手机 上 ， 保 证 点 击 模块 能 正常 运行 。 


12.1.2 引入 包 
































我 们 进入 到 项 目的 proj.andorid 目 录 下 ， 新 建 一 个 名 为 “libs” 的 文件 夹 。 将 开发 工具 包 中 libs 目 录 下 的 libammsdkJjar 复 制 到 该 目录 中 。 


























右 击 这 个 刚 加 入 的 包 ， 选 择 Build Path 中 的 “Add to Build Path”， 将 它 加 入 编译 路 径 ， 如 





12-1 所 示 。 


[ 





12.1.3 ”创建 主 Activity 


创建 一 个 继承 自 Cocos2dxActivity 的 类 。 添 加 一 个 名 为 “com.fansy.shareSDK” 的 包 ， 然 后 添加 一 个 “MainActivityjava” 的 类 ， 如 代码 清单 12-3 所 示 。 


I$ Package Explorer 3% 


> we amm_sdk_sample 
v 3 myShare 
> mì Android 4.2.2 
> wi Android Private Libraries 





> © src 
> E [Generated Java Files] 
> Gs assets 
> g bin 
(jy Classes 
名 cocos2dx New 
> Gy extensions 
> Jni Open 
v ibs Open With 
Show In xw 
> @ obj 
> Gores Copy 
@a scripting H Copy Qualified Name 


[A AndroidManifest.xml Ñ Paste V 
[D ant.properties 


build_native.py X Delete 区 


pe ge Build Path b & Add to Build Path 

loa roperies 25 = à $ Configure Build Path 
proguard-project.txt g = 

D project.properties a Import... 
[P] README.md eå Export... 


& Refresh 
Assign Working Sets... 


Javadoc B Declaration EJ Console 


Make Targets 


Validate -p "Search for messages. Accept 
Clean Selected File(s) ) filters) ( 








图 12-1 加 入 路 径 


代码 清单 12-3 创建 Activity 





public class MainActivity extends Cocos2dxActivity{ 

private static final String APP_ID = "yourself App_ID"; 

private IWXAPI api; 

@Override 

protected void onCreate (Bundle savedInstanceState) { 
// TODO Auto-generated method stub 
super .onCreate (savedInstanceState) ; 
Log.d("sss","Main create"); 
api = WXAPIFactory.createWXAPI (this, APP_ID,true); 
api.registerApp (APP_ID); 





此 处 是 Activity 的 创建 方法 ， 在 实际 开发 中 要 将 APP_ID 蔡 换 成 你 申请 应 用 的 APP_ID。 





编译 运行 ， 如 果 在 手机 上 能 够 正常 启动 程序 ， 则 证 明 环境 配置 正常 。 


12.2 ”发送 信息 到 微 信 
通常 我 们 会 将 程序 生成 的 一 段 文字 作为 链接 的 形式 发 送 到 微 信 中 ， 并 提示 用 户 分 享 。 接 下 来 我 们 看 看 如 何 将 一 句 话 发 送 到 微 信 中 。 


12.2.1 C++ 部 分 调用 





首先 更 改 我 们 的 C++ 代码 ， 更 改 menuCloseCallBack 函 数 ， 如 代码 清单 12-4 所 示 。 

















代码 清单 12-4 ”更 改 发 送 字符 串 





#if (CC_TARGET_PLATFORM == CC_PLATFORM ANDROID) 
#include "platform/android/jni/jniHelper.h" 


#endif 
void HelloWorld: :menuCloseCallback (Ref* pSender) 


{ 
#if (CC TARGET PLATFORM == CC PLATFORM ANDROID) 
JniMethodInfo t; ~ T 
std::string className = "com/fansy/shareSDK/MainActivity"; 
std::string paramStr = "hi,I'm Fansy,Why not Join Me?"; 
if (JniHelper: :getStaticMethodInfo (t,className.c_str() , "rtnObject", 
" () Ljava/lang/Object;")) a 
{ 
jobject jobj; 
jobj = t.env->CallStaticObjectMethod(t.classID, t.methodID) ; 
if (JniHelper: :getMethodInfo(t, className.c_str(),"sendToWeiXin", 
" (Ljava/lang/String;)V") ) = 
{ 
jstring jstrParaml = t.env->NewStringUTF (paramStr.c_str()); 
t.env->CallVoidMethod(jobj, t.methodID, jstrParam1); 
t.env->DeleteLocalRef (jstrParam1) ; 
} 


} 
auto label = dynamic_cast<LabelTTF*>(getChildByTag (100) ) ; 
label->setString ("Call Android"); 














#else 
Director: :getInstance () ->end () ; 
exit (0); 
#endif 
} 
我 们 自己 定义 了 一 个 字符 串 ， 将 其 作为 程序 的 信息 参数 。sendToWeiXin 是 我 们 在 Java 中 定义 的 函数 ， 它 有 一 个 string 类 型 的 参数 。 


12.2.2 ”Java 部 分 调用 


再 更 改 Java 部 分 ， 添 加 一 个 获取 Activity 的 函数 ， 再 添加 一 个 发 送 消息 到 微 信 的 调用 ， 如 代码 清单 12-5 所 示 。 





代码 清单 12-5 “发送 信息 到 微 信 





public class MainActivity extends Cocos2dxActivity{ 
private static final String APP_ID = "wxcd68c0a6d97a0162"; 
private IWXAPI api; T 
public static MainActivity s_Instance = null; 
public static Object rtnObject() { 
return s_Instance; 


Override 

protected void onCreate (Bundle savedInstanceState) { 
// TODO Auto-generated method stub 
super .onCreate (savedInstanceState) ; 
Log.d("sss","Main create"); 
api = WXAPIFactory.createWXAPI (this, APP ID,true) 7 
api.registerApp (APP_ID); T 
s_Instance = this; ` 

} 

public void sendToWeiXin (String str) 

{ 
WXTextObject textObj = new WxXTextObject (); 
textObj.text = str; 
WxXMediaMessage msg = new WXMediaMessage () 7 
msg.mediaObject = textObj; 
msg.description = str; 
SendMessageToWX.Req req = new SendMessageToWX.Req() 7 
req.transaction = String.valueOf (System.currentTimeMillis()); 
req.message = msg; 
api.sendReq (req) ; 





























首先 ， 在 onCreate 函 数 中 调用 WXAPIFactory.createWXAPI 函 数 来 创建 一 个 IWXAPI 的 对 象 。 在 sendToWeiXin 函 数 中 ， 调 用 IWXAPI 对 象 中 的 sendReq 函 数 可 以 将 我 们 自 定义 的 字符 串 发 送 到 微 信 中 











去 。 


编译 运行 ， 点 击 按钮 ， 会 唤起 微 信 登 录 。 


12.2.3 ”申请 包 签名 









































截至 本 书 完成 时 ， 要 在 微 信 上 使 用 分 享 功能 ， 必 须要 在 微 信 官 网 上 注册 应 用 的 包 名 。 在 官网 上 找到 一 个 生成 签名 的 APK 程 序 ， 安 装 在 手机 上 运行 。 


在 输入 框 中 输入 我 们 程序 的 包 名 ， 会 生成 一 个 MD5 的 校 验 码 。 如 果 包 名 输入 错误 ， 会 提示 找 不 到 对 应 的 名 字 。 我 们 可 以 在 自己 项 目的 “AndroidManifest.XML” 中，package 属 性 下 找到 包 名 。 














在 生成 后 验证 码 后 ， 将 其 提交 到 微 信 的 官方 网 页 中 。 腾 讯 会 对 包 名 进行 审核 ， 等 待 审核 通过 后 即 可 分 享 文字 。 








12.3 4s 


本 章 介绍 了 在 微 信 中 分 享 程序 信息 需要 做 哪些 准备 ， 并 讲解 了 如 何在 程序 中 自 定义 一 段 话 发 送 到 微 信 中 。 了 解 了 这 些 知识 ， 可 以 为 游戏 引入 更 多 的 社交 元 素 ， 帮 助 开 发 者 开发 出 更 易 推广 的 游戏 。 


光盘 内 容 


光盘 下 载 地 址 : http://pan.baidu.com/s/1jGh2Y5C 


